WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

http协议是单向通信，一般由客户端发起请求，然后接收服务端响应。如果要实现客户端实时消息跟新功能如：更新聊天消息，更新邮件信息，更新后台系统员工待办事消息等，传统的做法是基于http协议，然后客户端定时轮询(如每秒访问一次)访问服务端，但是这样就会产生大量无效的http请求，浪费了服务器资源。

而 WebSocket ，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输，客户端可以向服务端发送通信，并且客户端不必轮询请求服务端，服务端如果有消息可以直接发送给客户端。

以下是WebSocket实现聊天室代码示例：

1.集成webSocket

maven添加

<dependency>      <groupId>org.springframework.bootgroupId>      <artifactId>spring-boot-starter-websocketartifactId>  dependency>

添加配置类：WebSocketConfig

@Configurationpublic class WebSocketConfig {    @Bean    public ServerEndpointExporter serverEndpointExporter(){        return new ServerEndpointExporter();    }}

2.开发WebSocket服务端：

//@ServerEndpoint("/imserver/{userId}") 、@Component即可启用//WebSocket服务//@OnOpen开启连接触发调用，@onClose关闭连接触发调用//，@onMessage接收消息触发掉用@ServerEndpoint("/imserver/{userId}")@Componentpublic class WebSocketServer {    /**静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。*/    private static int onlineCount = 0;    //缓存每个客户端对应的MyWebSocket对象。    //如果是集群可改成redis或mysql    private static ConcurrentHashMap<String,WebSocketServer> webSocketMap = new ConcurrentHashMap<>();    /**与某个客户端的连接会话，需要通过它来给客户端发送数据*/    private Session session;    /**接收userId*/    private String userId="";    /**     * 连接建立成功调用的方法*/    @OnOpen    public void onOpen(Session session,@PathParam("userId") String userId) {        this.session = session;        this.userId=userId;        if(webSocketMap.containsKey(userId)){            //如果已有链接则跟新            webSocketMap.remove(userId);            webSocketMap.put(userId,this);        }else{            //如果新连接存入缓存中            webSocketMap.put(userId,this);            //在线人数加  1            addOnlineCount();        }        try {            //向链接客户端发送链接成功消息            sendMessage("{\"contentText\":\"连接成功\"}");            //跟新连接上的用户的在线人数            if(onlineCount > 0){                webSocketMap.values().forEach(x -> {                    try {                        x.sendMessage("{\"onlineCount\":"+onlineCount+"}");                    } catch (IOException e) {                    }                });            }        } catch (IOException e) {        }    }    /**     * 连接关闭调用的方法     */    @OnClose    public void onClose() {        if(webSocketMap.containsKey(userId)){            //从缓存中移除断开的链接            webSocketMap.remove(userId);            //在线人数  - 1            subOnlineCount();            //跟新连接上的用户的在线人数            if(onlineCount > 0){                webSocketMap.values().forEach(x -> {                    try {                        x.sendMessage("{\"onlineCount\":"+onlineCount+"}");                    } catch (IOException e) {                        e.printStackTrace();                    }                });            }        }    }    /**     * 收到客户端消息后调用的方法     *     * @param message 客户端发送过来的消息*/    @OnMessage    public void onMessage(String message, Session session) {        //可以群发消息        //消息保存到数据库、redis        if(!StringUtils.isEmpty(message)){            try {                //解析发送的报文                JSONObject jsonObject = JSON.parseObject(message);                //追加发送人(防止串改)                jsonObject.put("fromUserId",this.userId);                String toUserId=jsonObject.getString("toUserId");                //传送给对应toUserId用户的websocket                if((!StringUtils.isEmpty(toUserId))&&webSocketMap.containsKey(toUserId)){                    //向客户端发送消息                    webSocketMap.get(toUserId).sendMessage(jsonObject.toJSONString());                }else{                    //否则不在这个服务器上，发送到mysql或者redis                }            }catch (Exception e){                e.printStackTrace();            }        }    }    /**     *     * @param session     * @param error     */    @OnError    public void onError(Session session, Throwable error) {        error.printStackTrace();    }    /**     * 实现服务器主动推送     */    public void sendMessage(String message) throws IOException {        this.session.getBasicRemote().sendText(message);    }    /**     * 发送自定义消息     * */    public static void sendInfo(String message,@PathParam("userId") String userId) throws IOException {        if((!StringUtils.isEmpty(userId))&&webSocketMap.containsKey(userId)){            webSocketMap.get(userId).sendMessage(message);        }else{        }    }    public static synchronized int getOnlineCount() {        return onlineCount;    }    public static synchronized void addOnlineCount() {        WebSocketServer.onlineCount++;    }    public static synchronized void subOnlineCount() {        WebSocketServer.onlineCount--;    }}

3.客户端WebSocket开发

目前 HTML5 以支持WebSocket

var Socket = new WebSocket(url, [protocol] );WebSocket相关事件：open  Socket.onopen  连接建立时触发message  Socket.onmessage  客户端接收服务端数据时触发error  Socket.onerror  通信发生错误时触发close  Socket.onclose  连接关闭时触发

<html><head>    <meta charset="utf-8">    <title>websocket通讯title>head><script src="./jquery-1.7.2.js">script><script>    var socket;    function openSocket() {        if(typeof(WebSocket) == "undefined") {            console.log("您的浏览器不支持WebSocket");        }else{            console.log("您的浏览器支持WebSocket");            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接            //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");            //var socketUrl="${request.contextPath}/im/"+$("#userId").val();            var socketUrl="http://localhost:9999/imserver/"+$("#userId").val();            socketUrl=socketUrl.replace("https","ws").replace("http","ws");            console.log(socketUrl);            if(socket!=null){                socket.close();                socket=null;            }            socket = new WebSocket(socketUrl);            //打开事件            socket.onopen = function() {                console.log("websocket已打开");                //socket.send("这是来自客户端的消息" + location.href + new Date());            };            //获得消息事件            socket.onmessage = function(msg) {                console.log(msg.data);                //发现消息进入    开始处理前端触发逻辑                $("#contentText").val($.parseJSON(msg.data).contentText);                $("#onlineCount").val($.parseJSON(msg.data).onlineCount);            };            //关闭事件            socket.onclose = function() {                console.log("websocket已关闭");            };            //发生了错误事件            socket.onerror = function() {                console.log("websocket发生了错误");            }        }    }    function sendMessage() {        if(typeof(WebSocket) == "undefined") {            console.log("您的浏览器不支持WebSocket");        }else {            console.log("您的浏览器支持WebSocket");            var inputText = $("#inputText").val();            console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+inputText+'"}');            socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+inputText+'"}');        }    }script><body><p>【在线人数】：<div><input id="onlineCount" name="onlineCount" type="text" >div><p>【userId】：<div><input id="userId" name="userId" type="text" value="10">div><p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="20">div><p>【message】：<div>                <textarea id="contentText" name="contentText" type="text" value="hello websocket">textarea>                div><p>【input】：<div><input id="inputText" name="inputText" type="text" >div><p>【操作】：<div><a onclick="openSocket()">开启socketa>div><p>【操作】：<div><a onclick="sendMessage()">发送消息a>div>body>html>

4.演示：