一、什么是webSocket

WebSocket 是一种网络通信协议，是持久化协议。RFC6455 定义了它的通信标准。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

二、为什么要使用webSocket

传统的web通信是使用的http技术，http协议是无状态的、无连接的、单向的应用层协议。一次请求只能对应一个响应，通信请求只能由客户端发出，服务端对请求做出响应。所以服务端发出响应是非常被动的，这种被动的响应注定了服务端无法及时的给客户端主动推送响应，如果服务端有连续的状态变化的时候，客户端获取是很困难的。通过频繁使用了异步ajax去不断地获取请求去实现长轮询，这样做是特别消耗性能，而且效率低下。（不停的握手，或者长时间保持live)。

而webSocket允许服务器和客户端之间建立全双工通信，只要建立一次连接，就能一直保持连接状态。一旦建立一次连接，就能双方互相通信，不需要多次握手。

三、实现WEB聊天室

  1. 添加pom.xml，引入jar包
<dependency>

      <groupId>javax</groupId>

         <artifactId>javaee-api</artifactId>

         <version>7.0</version>

         <scope>provided</scope>

 </dependency>

2.建立html和js文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>在线聊天室</title>

<script type="text/javascript" src="./static/jquery-3.2.0.min.js"></script>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

  <div>

    <div><span>聊天室</span>

         <button class="btn btn-warning" onclick="doClose();">退出聊天</button>

    </div>

    <div><textarea class="form-control" style="width: 40%;" rows="3" id="contentInp"></textarea></div><hr/>

    <div><button class="btn btn-danger" onclick="doClear();">清空会话框</button></div>

    <div id="content">开始聊天<br/></div>

  </div>

</body>

<script type="text/javascript">

   var ws = new WebSocket("ws://localhost:8080/ws/websocket"); //controller层url

   $(function(){

       $("#contentInp").keyup(function(evt){

           if(evt.which == 13){ //enter键发送消息

               var htm = $("#contentInp").val();

               doSend(htm);

               $("textarea").empty();

           }

       });

   })

   ws.onopen = function(){

       appendHtm("连接成功！");

   }

   // 从服务端接收到消息，将消息回显到聊天记录区

   ws.onmessage = function(evt){

       appendHtm(evt.data);

   }

   ws.onerror = function(){

       appendHtm("连接失败！");

   }

   ws.onclose = function(){

       appendHtm("连接关闭！");

   }

   function appendHtm(htm){

       ($("#content")[0]).innerHTML += htm +"<br/>"

   }

   // 注销登录

   function doClose(){

       ws.close();

   }

   // 发送消息

   function doSend(htm){

      // ($("#content")[0]).innerHTML += htm +"<br/>"

       ws.send(htm);

   }

   function doClear(){

       $("#content").empty();

   }

</script>

</html>

3.后台java代码

package controller;

import java.io.IOException;

import java.util.concurrent.CopyOnWriteArraySet;

import javax.net.ssl.SSLSession;

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")

public class WebScoketServer {

    private static Integer onlineNum = 0; //当前在线人数，线程必须设计成安全的

    private static CopyOnWriteArraySet<WebScoketServer> arraySet = new CopyOnWriteArraySet<WebScoketServer>(); //存放每一个客户的的WebScoketServer对象，线程安全

    private Session session;

    /**

     * 连接成功

     * @param session 会话信息

     */

    @OnOpen

    public void onOpen(Session session) {

        this.session =session;

        arraySet.add(this);

        this.addOnlineNum();

        System.out.println("有一个新连接加入，当前在线 "+this.getOnLineNum()+" 人");

    }

    /**

     * 连接关闭

     */

    @OnClose

    public void onClose() {

        arraySet.remove(this);

        this.subOnlineNum();

        System.out.println("有一个连接断开，当前在线 "+this.getOnLineNum()+" 人");

    }

    /**

     * 连接错误

     * @param session

     * @param error

     */

    @OnError

    public void onError(Session session, Throwable error) {

        System.err.println("发生错误！");

        error.printStackTrace();

    }

    /**

     * 发送消息,不加注解，自己选择实现

     * @param msg

     * @throws IOException

     */

    public void onSend(String msg) throws IOException {

        this.session.getBasicRemote().sendText(msg);

    }

    /**

     * 收到客户端消息回调方法

     * @param session

     * @param msg

     */

    @OnMessage

    public void onMessage(Session session, String msg) {

        System.out.println("消息监控："+msg);

        for (WebScoketServer webScoketServer : arraySet) {

            try {

                webScoketServer.onSend(msg);

            } catch (IOException e) {

                e.printStackTrace();

                continue;

            }

        }

    }

    /**

     * 增加一个在线人数

     */

    private synchronized void addOnlineNum() {

        onlineNum++;

    }

    /**

     * 减少一个在线人数

     */

    private synchronized void subOnlineNum() {

        onlineNum--;

    }

    private Integer getOnLineNum() {

        return onlineNum;

    }

}

4.完成后效果

JAVA实现webSocket网页聊天室的更多相关文章

  1. WebSocket 网页聊天室

    先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...

  2. WebSocket 网页聊天室的实现（服务器端：.net + windows服务，前端：Html5）

    websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器 ...

  3. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  4. JavaWeb网页聊天室（WebSocket即时通讯）

    原文:http://baike.xsoftlab.net/view/656.html Git地址 http://git.oschina.net/loopcc/WebSocketChat 概要: Web ...

  5. Spring之WebSocket网页聊天以及服务器推送

    Spring之WebSocket网页聊天以及服务器推送 转自:http://www.xdemo.org/spring-websocket-comet/ /Springframework /Spring ...

  6. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  7. 基于flask的网页聊天室（四）

    基于flask的网页聊天室(四) 前言 接前天的内容,今天完成了消息的处理 具体内容 上次使用了flask_login做用户登录,但是直接访问login_requare装饰的函数会报401错误,这里可 ...

  8. Java网络编程案例---聊天室

    网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.net包中JavaSE的API包含有类和接口,它们提供低层次的通信细节.你可以直接使用这些类和接口,来专注于解决 ...

  9. 基于WebSocket实现聊天室(Node)

    基于WebSocket实现聊天室(Node) WebSocket是基于TCP的长连接通信协议,服务端可以主动向前端传递数据,相比比AJAX轮询服务器,WebSocket采用监听的方式,减轻了服务器压力 ...

随机推荐

  1. [NOI2002] 贪吃的九头蛇

    考虑任意一种划给大头的方案,两端的都给了大头(bel=1)的边产生难受值,剩下n-k个果子分给m-1个头,当m-1=1时,两端都给了这个小头也产生难受值:而m-1>1的情况要好看的多,贪心的,因 ...

  2. npm ERR! missing script: build

    webpack-bundle-analyzer webpack可视化插件,用来查看一共打了多少个包,每个包的体积和包里面的情况. 启动查看 npm run build --report 结果报错npm ...

  3. BZOJ 4668: 冷战 并查集&&暴力LCA（雾）

    利用并查集按秩合并,保存每个点合并的时间: 求时间时,就一直跳u=fa[u],并记录路径上时间的最大值,代表最后一次合并的时间 #include<cstdio> #include<i ...

  4. (转)sudo配置文件/etc/sudoers详解及实战用法

    sudo配置文件/etc/sudoers详解及实战用法 原文:http://blog.csdn.net/field_yang/article/details/51547804 一.sudo执行命令的流 ...

  5. openstack安装newton版本neutron服务部署（四）

    一.管理节点部署服务: 1.安装neutron: [root@linux-node1 ~]# yum install openstack-neutron openstack-neutron-ml2 o ...

  6. Jenkins+Gitlab+Ansible自动化部署（四）

    接Jenkins+Gitlab+Ansible自动化部署(三)https://www.cnblogs.com/zd520pyx1314/p/10235394.html Jenkins应用 Jenkin ...

  7. RabbitMQ使用教程（二）RabbitMQ用户管理,角色管理及权限设置

    上一篇博客 RabbitMQ使用教程(一)RabbitMQ环境安装配置及Hello World示例 中,我们成功的安装好了RabbitMQ环境,并通过一个Java客户端示例了解了用生产者来发布消息,用 ...

  8. Vue2之页面 、js 、css分离

    在编写vue的时候,页面数据少的时候,可以将所有的js和css都可以直接写在页面上,但是页面数据多,js.css的方法和样式多的时候,都放在一个页面的时候,就显得页面vue十分的臃肿. 所以写项目的时 ...

  9. 【转】 Oracle 中的一些重要V$ 动态性能视图，系统视图和表

    v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...

  10. String、String Buffer、String Builder

    对于String.String Buffer.String Builder:我一直都只知道String是字符串常量,后两者是字符串变量: String和String Buffer是线程安全的,Stri ...