创建时间：2020年10月8日
作者：CondingGorit
项目版本：SpringBoot 2.3.4
参考文章：

一、什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行 全双工通信的协议， 使用 WebSocket 可以使 客户端 和 服务器 之间的数据交换变得更加简单，它允许服务端 向 客户端推送数据。游览器只用和服务器只需要 完成一次握手，两者之间就可以创建 持久性 的连接，并进行双向数据传输

二、WebSocket 的特性

  1. HTTP/1.1 的协议升级特性
  2. WebSocket 请求使用非正常的 HTTP 请求以特定的模式访问一个 URL，这个 URL 包含 ws 和 wss，对应 HTTP 协议中的 HTTP 和 HTTPS，

image.png

三、 WebSocket 的应用场景

  • 在线股票网站
  • 即时聊天
  • 多人在线游戏
  • 应用集群通信
  • 系统性能实时监控

四、SpringBoot 整合 WebSocket

项目结构：
image.png

4.1 导入相关依赖

搭建一个 Web 应用，导入 WebSocket 相关依赖

  1.         <dependency>
  2.             <groupId>org.springframework.boot</groupId>
  3.             <artifactId>spring-boot-starter-websocket</artifactId>
  4.         </dependency>

4.2 编写 WebSocket 配置类

  1. package cn.gorit.config;
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  7. /**
  8.  * @Classname WebSocketConfig
  9.  * @Description TODO
  10.  * @Date 2020/10/8 20:35
  11.  * @Created by CodingGorit
  12.  * @Version 1.0
  13.  */
  14. @Configuration
  15. public class WebSocketConfig {
  17.     @Bean
  18.     public ServerEndpointExporter serverEndpointExporter() {
  19.         return new ServerEndpointExporter();
  20.     }
  21. }

4.3 配置 WebSocket 服务端类

  1. package cn.gorit.websocket;
  3. import org.springframework.stereotype.Component;
  4. import javax.websocket.*;
  5. import javax.websocket.server.PathParam;
  6. import javax.websocket.server.ServerEndpoint;
  7. import java.io.IOException;
  8. import java.util.concurrent.ConcurrentHashMap;
  9. /**
  10.  * @Classname ProductWebSocket
  11.  * @Description TODO
  12.  * @Date 2020/10/8 20:36
  13.  * @Created by CodingGorit
  14.  * @Version 1.0
  15.  */
  16. /**
  17.  * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
  18.  * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
  19.  * @ServerEndpoint 可以把当前类变成 websocket服务类
  20.  */
  21. @ServerEndpoint("/websocket/{userId}")
  22. @Component
  23. public class ProductWebSocket {
  25.     //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
  26.     private static int onlineCount = 0;
  28.     //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户id
  29.     private static ConcurrentHashMap<String, ProductWebSocket> webSocketSet = new ConcurrentHashMap<String, ProductWebSocket>();
  31.     //与某个客户端的连接会话，需要通过它来给客户端发送数据
  32.     private Session session;
  34.     //当前发消息的人员编号
  35.     private String userId = "";
  37.     /**
  38.      * 线程安全的统计在线人数
  39.      *
  40.      * @return
  41.      */
  42.     public static synchronized int getOnlineCount() {
  43.         return onlineCount;
  44.     }
  46.     public static synchronized void addOnlineCount() {
  47.         ProductWebSocket.onlineCount++;
  48.     }
  50.     public static synchronized void subOnlineCount() {
  51.         ProductWebSocket.onlineCount--;
  52.     }
  54.     /**
  55.      * 连接建立成功调用的方法
  56.      *
  57.      * @param param   用户唯一标示
  58.      * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
  59.      */
  60.     @OnOpen
  61.     public void onOpen(@PathParam(value = "userId") String param, Session session) {
  62.         userId = param;//接收到发送消息的人员编号
  63.         this.session = session;
  64.         webSocketSet.put(param, this);//加入线程安全map中
  65.         addOnlineCount();           //在线数加1
  66.         System.out.println("用户id：" + param + "加入连接！当前在线人数为" + getOnlineCount());
  67.     }
  69.     /**
  70.      * 连接关闭调用的方法
  71.      */
  72.     @OnClose
  73.     public void onClose() {
  74.         if (!"".equals(userId)) {
  75.             webSocketSet.remove(userId);  //根据用户id从ma中删除
  76.             subOnlineCount();           //在线数减1
  77.             System.out.println("用户id：" + userId + "关闭连接！当前在线人数为" + getOnlineCount());
  78.         }
  79.     }
  81.     /**
  82.      * 收到客户端消息后调用的方法
  83.      *
  84.      * @param message 客户端发送过来的消息
  85.      * @param session 可选的参数
  86.      */
  87.     @OnMessage
  88.     public void onMessage(String message, Session session) {
  89.         System.out.println("来自客户端的消息:" + message);
  90.         //要发送人的用户uuid
  91.         String sendUserId = message.split(",")[1];
  92.         //发送的信息
  93.         String sendMessage = message.split(",")[0];
  94.         //给指定的人发消息
  95.         sendToUser(sendUserId, sendMessage);
  97.     }
  99.     /**
  100.      * 给指定的人发送消息
  101.      *
  102.      * @param message
  103.      */
  104.     public void sendToUser(String sendUserId, String message) {
  106.         try {
  107.             if (webSocketSet.get(sendUserId) != null) {
  108.                 webSocketSet.get(sendUserId).sendMessage(userId + "给我发来消息，消息内容为--->>" + message);
  109.             } else {
  111.                 if (webSocketSet.get(userId) != null) {
  112.                     webSocketSet.get(userId).sendMessage("用户id：" + sendUserId + "以离线，未收到您的信息！");
  113.                 }
  114.                 System.out.println("消息接受人:" + sendUserId + "已经离线！");
  115.             }
  116.         } catch (IOException e) {
  117.             e.printStackTrace();
  118.         }
  119.     }
  121.     /**
  122.      * 管理员发送消息
  123.      *
  124.      * @param message
  125.      */
  126.     public void systemSendToUser(String sendUserId, String message) {
  128.         try {
  129.             if (webSocketSet.get(sendUserId) != null) {
  130.                 webSocketSet.get(sendUserId).sendMessage("系统给我发来消息，消息内容为--->>" + message);
  131.             } else {
  132.                 System.out.println("消息接受人:" + sendUserId + "已经离线！");
  133.             }
  134.         } catch (IOException e) {
  135.             e.printStackTrace();
  136.         }
  137.     }
  139.     /**
  140.      * 给所有人发消息，按理说，这个是不允许对外开放的，只能对指定权限的用户（如管理员）开放
  141.      *
  142.      * @param message
  143.      */
  144.     public void sendAll(String message) {
  145.         String sendMessage = message.split(",")[0];
  146.         //遍历HashMap
  147.         for (String key : webSocketSet.keySet()) {
  148.             try {
  149.                 //判断接收用户是否是当前发消息的用户
  150.                 if (!userId.equals(key)) {
  151.                     webSocketSet.get(key).sendMessage("用户:" + userId + "发来消息：" + " <br/> " + sendMessage);
  152.                     System.out.println("key = " + key);
  153.                 }
  154.             } catch (IOException e) {
  155.                 e.printStackTrace();
  156.             }
  157.         }
  158.     }
  161.     /**
  162.      * 发生错误时调用
  163.      *
  164.      * @param session
  165.      * @param error
  166.      */
  167.     @OnError
  168.     public void onError(Session session, Throwable error) {
  169.         System.out.println("发生错误");
  170.         error.printStackTrace();
  171.     }
  173.     /**
  174.      * 发送消息
  175.      *
  176.      * @param message
  177.      * @throws IOException
  178.      */
  179.     public void sendMessage(String message) throws IOException {
  180.         //同步发送
  181.         this.session.getBasicRemote().sendText(message);
  182.         //异步发送
  183.         //this.session.getAsyncRemote().sendText(message);
  184.     }
  185. }

4.4 控制层

  1. package cn.gorit.controller;
  3. import cn.gorit.websocket.ProductWebSocket;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.*;
  8. /**
  9.  * @Classname IndexController
  10.  * @Description TODO
  11.  * @Date 2020/10/8 20:40
  12.  * @Created by CodingGorit
  13.  * @Version 1.0
  14.  */
  15. @CrossOrigin
  16. @Controller
  17. public class IndexController {
  19.     @Autowired
  20.     ProductWebSocket socket;
  22.     @GetMapping(value = "/")
  23.     @ResponseBody
  24.     public Object index() {
  25.         return "Hello,ALl。This is CodingGorit's webSocket demo！";
  26.     }
  28.     @ResponseBody
  29.     @GetMapping("test")
  30.     public String test(String userId, String message) throws Exception {
  31.         if (userId == "" || userId == null) {
  32.             return "发送用户id不能为空";
  33.         }
  34.         if (message == "" || message == null) {
  35.             return "发送信息不能为空";
  36.         }
  37.         new ProductWebSocket().systemSendToUser(userId, message);
  38.         return "发送成功！";
  39.     }
  41.     @RequestMapping(value = "/user")
  42.     public String user() {
  43.         return "user.html";
  44.     }
  46.     @RequestMapping(value = "/ws")
  47.     public String ws() {
  48.         return "ws.html";
  49.     }
  51.     @RequestMapping(value = "/ws2")
  52.     public String ws1() {
  53.         return "ws2.html";
  54.     }
  56.     /**
  57.      * 管理员的页面，可以发送广播消息
  58.      * @return
  59.      */
  60.     @RequestMapping(value = "/admin")
  61.     public String admin() {
  62.         return "gb.html";
  63.     }
  65.     @ResponseBody
  66.     @RequestMapping(value = "/sendAll" ,method = RequestMethod.GET)
  67.     public String sendAll (String msg) {
  68.         socket.sendAll(msg);
  69.         return "发送成功";
  70.     }
  71. }

4.5 前端页面编写

我之前使用 内网穿透测试了，所以访问端口就是 80 端口

gb.html 编写 （管理员发送广播消息）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <h3>广播消息</h3>
  9.     <input type="text" id="text">
  10.     <button onclick="send()">发送消息</button>
  11.     <br/>
  13.     <button onclick="closeWebSocket()">关闭WebSocket连接</button>
  14.     <br/>
  15.     <div id="message"></div>
  16.     <script type="text/javascript">
  17.         var websocket = null;
  19.         var userId = "admin"
  21.         //判断当前浏览器是否支持WebSocket
  22.         if ('WebSocket' in window) {
  23.             websocket = new WebSocket("ws://127.0.0.1:80/websocket/" + userId);
  24.         } else {
  25.             alert('当前浏览器不支持websocket哦！')
  26.         }
  28.         //连接发生错误的回调方法
  29.         websocket.onerror = function () {
  30.             setMessageInnerHTML("WebSocket连接发生错误");
  31.         };
  33.         //连接成功建立的回调方法
  34.         websocket.onopen = function () {
  35.             setMessageInnerHTML("WebSocket连接成功");
  36.         }
  38.         //接收到消息的回调方法
  39.         websocket.onmessage = function (event) {
  40.             setMessageInnerHTML(event.data);
  41.         }
  43.         //连接关闭的回调方法
  44.         websocket.onclose = function () {
  45.             setMessageInnerHTML("WebSocket连接关闭");
  46.         }
  48.         //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  49.         window.onbeforeunload = function () {
  50.             closeWebSocket();
  51.         }
  53.         //将消息显示在网页上
  54.         function setMessageInnerHTML(sendMessage) {
  55.             document.getElementById('message').innerHTML += sendMessage + '<br/>';
  56.         }
  58.         //关闭WebSocket连接
  59.         function closeWebSocket() {
  60.             websocket.close();
  61.         }
  63.         //发送消息
  64.         function send() {
  65.             var message = document.getElementById('text').value;//要发送的消息内容
  67.             if (message === "") {
  68.                 alert("发送信息不能为空！")
  69.                 return;
  70.             }
  71.             // 给所有人发消息
  72.             fetch('http://127.0.0.1:80/sendAll?msg='+message).then(res => {
  73.                 console.log(res)
  74.             })
  75.             //获取发送人用户id
  76.             // var sendUserId = document.getElementById('sendUserId').value;
  77.             // if (sendUserId === "") {
  78.             //     alert("发送人用户id不能为空！")
  79.             //     return;
  80.             // }
  81.             //
  82.             // document.getElementById('message').innerHTML += (userId + "给" + sendUserId + "发送消息,消息内容为---->>" + message + '<br/>');
  83.             // message = message + "," + sendUserId//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
  84.             // websocket.send(message);
  85.         }
  86.     </script>
  87. </body>
  88. </html>

user.html 模拟任何用户（都可以登录的页面发送消息）

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<head>
    <title>WebSocket SpringBootDemo</title>
</head>
<body>
<h3>
    用户id：xiaoyou001  用户id：xiaoyou002 用户id：admin 可以聊天
</h3>
<!--userId:发送消息人的编号-->
<div>
    用户名：<input type="text" id="userId" placeholder="请输入用户的 ID">
    <button type="button" onclick="connect()">建立连接</button>
</div>

<br/><input id="text" type="text"/>
<input id="sendUserId" placeholder="请输入接收人的用户id"></input>
<button onclick="send()">发送消息</button>
<br/>

<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<br/>
<div>公众号：猿码优创</div>
<br/>
<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    function connect() {
        var userId = document.getElementById("userId").value;

        if (userId === '') {
            return alert('userId 不能为空！！！')
        }
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://127.0.0.1:80/websocket/" + userId);
        } else {
            alert('当前浏览器不支持websocket哦！')
        }
    }


    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    }

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(sendMessage) {
        document.getElementById('message').innerHTML += sendMessage + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;//要发送的消息内容

        if (message === "") {
            alert("发送信息不能为空！")
            return;
        } //获取发送人用户id
        var sendUserId = document.getElementById('sendUserId').value;
        if (sendUserId === "") {
            alert("发送人用户id不能为空！")
            return;
        }

        document.getElementById('message').innerHTML += (userId + "给" + sendUserId + "发送消息,消息内容为---->>" + message + '<br/>');
        message = message + "," + sendUserId//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
        websocket.send(message);
    }
</script>
</html>

ws.html 测试账号

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<head>
    <title>WebSocket SpringBootDemo</title>
</head>
<body>
<!--userId:发送消息人的编号-->
<div>默认用户id：xiaoyou001（后期可以根据业务逻辑替换）</div>

<br/><input id="text" type="text"/>
<input id="sendUserId" placeholder="请输入接收人的用户id"></input>
<button onclick="send()">发送消息</button>
<br/>

<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<br/>
<div>公众号：猿码优创</div>
<br/>
<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    var userId = "xiaoyou001"

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://127.0.0.1:80/websocket/" + userId);
    } else {
        alert('当前浏览器不支持websocket哦！')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(sendMessage) {
        document.getElementById('message').innerHTML += sendMessage + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;//要发送的消息内容

        if (message === "") {
            alert("发送信息不能为空！")
            return;
        } //获取发送人用户id
        var sendUserId = document.getElementById('sendUserId').value;
        if (sendUserId === "") {
            alert("发送人用户id不能为空！")
            return;
        }

        document.getElementById('message').innerHTML += (userId + "给" + sendUserId + "发送消息,消息内容为---->>" + message + '<br/>');
        message = message + "," + sendUserId//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
        websocket.send(message);
    }
</script>
</html>

ws2.html 测试账号

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<head>
    <title>WebSocket SpringBootDemo</title>
</head>
<body>
<!--userId:发送消息人的编号-->
<div>默认用户id：xiaoyou002（后期可以根据业务逻辑替换）</div>

<br/><input id="text" placeholder="请输入要发送的信息" type="text"/>
<input id="sendUserId" placeholder="请输入接收人的用户id"/>
<button onclick="send()">发送消息</button>
<br/>

<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<br/>
</br>
<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    var userId = "xiaoyou002"

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://127.0.0.1:80/websocket/" + userId);
    } else {
        alert('当前浏览器不支持websocket哦！')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(sendMessage) {
        document.getElementById('message').innerHTML += sendMessage + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;//要发送的消息内容

        if (message == "") {
            alert("发送信息不能为空！")
            return;
        } //获取发送人用户id
        var sendUserId = document.getElementById('sendUserId').value;
        if (sendUserId == "") {
            alert("发送人用户id不能为空！")
            return;
        }

        document.getElementById('message').innerHTML += ("我给" + sendUserId + "发送消息,消息内容为---->>" + message + '<br/>');
        message = message + "," + sendUserId//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
        websocket.send(message);
    }
</script>
</html>

五、项目运行截图

image.png

image.png

image.png
image.png