• Springboot 整合 Socket 实战案例 ，实现 单点发送、广播群发，1对1，1对多

    本篇内容：

    后端 + 前端简单HTML页面

    功能场景点：


    1.  群发，所有人都能收到

    2.  局部群发，部分人群都能收到

    3.  单点推送， 指定某个人的页面

    惯例，先看看本次实战示例项目结构：

     

    可以看到内容不多，也就是说，springboot 整合socket， 跟着我学，轻轻松松。

    古有曹植七步成诗,如今，咱们也是 7步学会整合socket！

    不多说，开始：



     ① pom引入核心依赖

    1.     
    2.         
    3.             com.alibaba
    4.             fastjson
    5.             1.2.75
    6.         
    7.         
    8.             com.corundumstudio.socketio
    9.             netty-socketio
    10.             1.7.7
    11.         
    12.         
    13.             org.springframework.boot
    14.             spring-boot-starter-web
    15.         
    16.         
    17.             org.springframework.boot
    18.             spring-boot-starter-test
    19.             test
    20.         
    21.

     ② yml加上配置项

    1. server:
    2.   port: 8089
    3.  
    4. socketio:
    5.    host: localhost
    6.    port: 8503
    7.    maxFramePayloadLength: 1048576
    8.    maxHttpContentLength: 1048576
    9.    bossCount: 1
    10.    workCount: 100
    11.    allowCustomRequests: true
    12.    upgradeTimeout: 10000
    13.    pingTimeout: 60000
    14.    pingInterval: 25000

    ③ 创建socket配置加载类 MySocketConfig.java

    1. import com.corundumstudio.socketio.SocketConfig;
    2. import com.corundumstudio.socketio.SocketIOServer;
    3. import com.corundumstudio.socketio.annotation.SpringAnnotationScanner;
    4. import org.springframework.beans.factory.annotation.Value;
    5. import org.springframework.context.annotation.Bean;
    6. import org.springframework.context.annotation.Configuration;
    7.  
    8. /**
    9.  * @Author: JCccc
    10.  * @Description:
    11.  * @Date: 2022/06/13 21:50
    12.  */
    13. @Configuration
    14. public class MySocketConfig{
    15.  
    16.     @Value("${socketio.host}")
    17.     private String host;
    18.  
    19.     @Value("${socketio.port}")
    20.     private Integer port;
    21.  
    22.     @Value("${socketio.bossCount}")
    23.     private int bossCount;
    24.  
    25.     @Value("${socketio.workCount}")
    26.     private int workCount;
    27.  
    28.     @Value("${socketio.allowCustomRequests}")
    29.     private boolean allowCustomRequests;
    30.  
    31.     @Value("${socketio.upgradeTimeout}")
    32.     private int upgradeTimeout;
    33.  
    34.     @Value("${socketio.pingTimeout}")
    35.     private int pingTimeout;
    36.  
    37.     @Value("${socketio.pingInterval}")
    38.     private int pingInterval;
    39.  
    40.     @Bean
    41.     public SocketIOServer socketIOServer() {
    42.         SocketConfig socketConfig = new SocketConfig();
    43.         socketConfig.setTcpNoDelay(true);
    44.         socketConfig.setSoLinger(0);
    45.         com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
    46.         buildSocketConfig(socketConfig, config);
    47.         return new SocketIOServer(config);
    48.     }
    49.  
    50.     /**
    51.      * 扫描netty-socketIo的注解( @OnConnect、@OnEvent等）
    52.      */
    53.     @Bean
    54.     public SpringAnnotationScanner springAnnotationScanner() {
    55.         return new SpringAnnotationScanner(socketIOServer());
    56.     }
    57.  
    58.     private void buildSocketConfig(SocketConfig socketConfig, com.corundumstudio.socketio.Configuration config) {
    59.         config.setSocketConfig(socketConfig);
    60.         config.setHostname(host);
    61.         config.setPort(port);
    62.         config.setBossThreads(bossCount);
    63.         config.setWorkerThreads(workCount);
    64.         config.setAllowCustomRequests(allowCustomRequests);
    65.         config.setUpgradeTimeout(upgradeTimeout);
    66.         config.setPingTimeout(pingTimeout);
    67.         config.setPingInterval(pingInterval);
    68.     }
    69. }


     

     

    ④创建消息实体 MyMessage.java

    1. /**
    2.  * @Author: JCccc
    3.  * @Date: 2022-07-23 9:05
    4.  * @Description:
    5.  */
    6. public class MyMessage {
    7.  
    8.     private String type;
    9.  
    10.     private String content;
    11.  
    12.     private String from;
    13.  
    14.     private String to;
    15.  
    16.     private String channel;
    17.  
    18.  
    19.     public String getType() {
    20.         return type;
    21.     }
    22.  
    23.     public void setType(String type) {
    24.         this.type = type;
    25.     }
    26.  
    27.     public String getContent() {
    28.         return content;
    29.     }
    30.  
    31.     public void setContent(String content) {
    32.         this.content = content;
    33.     }
    34.  
    35.     public String getFrom() {
    36.         return from;
    37.     }
    38.  
    39.     public void setFrom(String from) {
    40.         this.from = from;
    41.     }
    42.  
    43.     public String getTo() {
    44.         return to;
    45.     }
    46.  
    47.     public void setTo(String to) {
    48.         this.to = to;
    49.     }
    50.  
    51.     public String getChannel() {
    52.         return channel;
    53.     }
    54.  
    55.     public void setChannel(String channel) {
    56.         this.channel = channel;
    57.     }
    58. }

    代码简析：

     

     

    ⑤创建 socket handler 负责记录客户端 连接、下线

    MySocketHandler.java

    1. import com.corundumstudio.socketio.SocketIOClient;
    2. import com.corundumstudio.socketio.SocketIOServer;
    3. import com.corundumstudio.socketio.annotation.OnConnect;
    4. import com.corundumstudio.socketio.annotation.OnDisconnect;
    5. import com.socket.mysocket.util.SocketUtil;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import javax.annotation.PostConstruct;
    8. import javax.annotation.PreDestroy;
    9. import org.slf4j.Logger;
    10. import org.slf4j.LoggerFactory;
    11. import org.springframework.stereotype.Component;
    12.  
    13.  
    14. /**
    15.  * @Author: JCccc
    16.  * @Description:
    17.  * @Date: 2022/6/23 21:21
    18.  */
    19. @Component
    20. public class MySocketHandler {
    21.     private final Logger log = LoggerFactory.getLogger(this.getClass());
    22.     @Autowired
    23.     private SocketIOServer socketIoServer;
    24.     @PostConstruct
    25.     private void start(){
    26.         try {
    27.             socketIoServer.start();
    28.         }catch (Exception e){
    29.             e.printStackTrace();
    30.         }
    31.     }
    32.     @PreDestroy
    33.     private void destroy(){
    34.         try {
    35.         socketIoServer.stop();
    36.         }catch (Exception e){
    37.             e.printStackTrace();
    38.         }
    39.     }
    40.     @OnConnect
    41.     public void connect(SocketIOClient client) {
    42.         String userFlag = client.getHandshakeData().getSingleUrlParam("userFlag");
    43.         SocketUtil.connectMap.put(userFlag, client);
    44.         log.info("客户端userFlag: "+ userFlag+ "已连接");
    45.     }
    46.     @OnDisconnect
    47.     public void onDisconnect(SocketIOClient client) {
    48.         String userFlag = client.getHandshakeData().getSingleUrlParam("userFlag");
    49.         log.info("客户端userFlag:" + userFlag + "断开连接");
    50.         SocketUtil.connectMap.remove(userFlag, client);
    51.     }
    52. }

     

    代码简析：

     

     ⑥ 封装的socket 小函数

    SocketUtil.java

    1. import com.alibaba.fastjson.JSON;
    2. import com.alibaba.fastjson.JSONObject;
    3. import com.corundumstudio.socketio.AckRequest;
    4. import com.corundumstudio.socketio.SocketIOClient;
    5. import com.corundumstudio.socketio.annotation.OnEvent;
    6. import org.slf4j.Logger;
    7. import org.slf4j.LoggerFactory;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Component;
    10. import org.springframework.util.StringUtils;
    11.  
    12. import java.util.Map;
    13. import java.util.Objects;
    14. import java.util.concurrent.ConcurrentHashMap;
    15. import java.util.concurrent.ConcurrentMap;
    16.  
    17. /**
    18.  * @Author: JCccc
    19.  * @Description:
    20.  * @Date: 2022/6/23 21:28
    21.  */
    22. @Component
    23. public class SocketUtil {
    24.  
    25.     private final Logger log = LoggerFactory.getLogger(this.getClass());
    26.  
    27.     //暂且把用户&客户端信息存在缓存
    28.     public static ConcurrentMap connectMap = new ConcurrentHashMap<>();
    29.  
    30.     @OnEvent(value = "CHANNEL_SYSTEM")
    31.     public void systemDataListener(String receiveMsg) {
    32.         if (!StringUtils.hasLength(receiveMsg)){
    33.             return;
    34.         }
    35.         JSONObject msgObject = (JSONObject) JSON.parse(receiveMsg);
    36.         String userFlag = String.valueOf(msgObject.get("from"));
    37.         String content = String.valueOf(msgObject.get("content"));
    38.         log.info("收到用户 ： {} 推送到系统频道的一条消息 :{}",userFlag,content );
    39.     }
    40.  
    41.     public void sendToAll(Map msg,String sendChannel) {
    42.         if (connectMap.isEmpty()){
    43.             return;
    44.         }
    45.         //给在这个频道的每个客户端发消息
    46.         for (Map.Entry entry : connectMap.entrySet()) {
    47.             entry.getValue().sendEvent(sendChannel, msg);
    48.         }
    49.     }
    50.  
    51.     public void sendToOne(String userFlag, Map msg,String sendChannel) {
    52.         //拿出某个客户端信息
    53.         SocketIOClient socketClient = getSocketClient(userFlag);
    54.         if (Objects.nonNull(socketClient) ){
    55.             //单独给他发消息
    56.             socketClient.sendEvent(sendChannel,msg);
    57.         }
    58.     }
    59.  
    60.  
    61.     /**
    62.      * 识别出客户端
    63.      * @param userFlag
    64.      * @return
    65.      */
    66.     public SocketIOClient getSocketClient(String userFlag){
    67.         SocketIOClient client = null;
    68.         if (StringUtils.hasLength(userFlag) &&  !connectMap.isEmpty()){
    69.             for (String key : connectMap.keySet()) {
    70.                 if (userFlag.equals(key)){
    71.                     client = connectMap.get(key);
    72.                 }
    73.             }
    74.         }
    75.         return client;
    76.     }
    77.  
    78.  
    79.  
    80. }

    代码简析：

     

    ⑦写1个接口，模拟场景，前端页面调用后端接口，做消息推送

    TestController.java

    1. import com.socket.mysocket.dto.MyMessage;
    2. import com.socket.mysocket.util.SocketUtil;
    3. import org.springframework.beans.factory.annotation.Autowired;
    4. import org.springframework.web.bind.annotation.*;
    5.  
    6. import java.util.HashMap;
    7. import java.util.Map;
    8.  
    9. /**
    10.  * @Author: JCccc
    11.  * @Description:
    12.  * @Date: 2022/06/13 21:50
    13.  */
    14. @RestController
    15. public class TestController {
    16.     public final static String SEND_TYPE_ALL = "ALL";
    17.     public final static String SEND_TYPE_ALONE = "ALONE";
    18.     @Autowired
    19.     SocketUtil socketUtil;
    20.  
    21.     @PostMapping("/testSendMsg")
    22.     public String testSendMsg(@RequestBody MyMessage myMessage){
    23.         Map map = new HashMap<>();
    24.         map.put("msg",myMessage.getContent());
    25.  
    26.         //群发
    27.         if (SEND_TYPE_ALL.equals(myMessage.getType())){
    28.             socketUtil.sendToAll( map,myMessage.getChannel());
    29.             return "success";
    30.         }
    31.         //指定单人
    32.         if (SEND_TYPE_ALONE.equals(myMessage.getType())){
    33.             socketUtil.sendToOne(myMessage.getTo(), map, myMessage.getChannel());
    34.             return "success";
    35.         }
    36.  
    37.         return "fail";
    38.     }
    39. }

    代码简析：

     

    好了，7步了。一切已经就绪了。



    前端简单页面

    接下来搞点前端HTML页面， 玩一玩看看效果:


     

    第一个页面：
    TestClientStudentJC.html

    1. html>
    2. <html>
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5.     <title>我要连SOCKETtitle>
    6.     <base>
    7.     <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js">script>
    8.     <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js">script>
    9.     <style>
    10.         body {
    11.             padding: 20px;
    12.         }
    13.         #console {
    14.             height: 450px;
    15.             overflow: auto;
    16.         }
    17.         .msg-color {
    18.             color: green;
    19.         }
    20.     style>
    21. head>
    22.  
    23. <body>
    24. <div id="console" class="well">div>
    25.  
    26.  
    27. <div id="conversationDiv">
    28.     <labal>给系统推消息labal>
    29.     <input type="text" id="content"/>
    30.     <button id="btnSendToSystem" onclick="sendSys();">发送button>
    31. div>
    32.  
    33.  
    34. body>
    35. <script type="text/javascript">
    36.     var socket;
    37.     connect();
    38.  
    39.     function connect() {
    40.         var userFlag = 'user_JC';
    41.         var opts = {
    42.             query: 'userFlag=' + userFlag
    43.         };
    44.         socket = io.connect('http://localhost:8503', opts);
    45.         socket.on('connect', function () {
    46.             console.log("连接成功");
    47.             output('当前用户是：' + userFlag );
    48.             output('连接成功了。');
    49.         });
    50.         socket.on('disconnect', function () {
    51.             output('下线了。 ');
    52.         });
    53.  
    54.         socket.on('CHANNEL_STUDENT', function (data) {
    55.             let msg= JSON.stringify(data)
    56.             output('收到学生频道消息了：' + msg );
    57.             console.log(data);
    58.  
    59.         });
    60.         socket.on('CHANNEL_SYSTEM', function (data) {
    61.             let msg= JSON.stringify(data)
    62.             output('收到系统全局消息了：' + msg );
    63.             console.log(data);
    64.  
    65.         });
    66.  
    67.     }
    68.  
    69.     function sendSys() {
    70.         console.log('发送消息给服务端');
    71.         var content = document.getElementById('content').value;
    72.  
    73.         socket.emit('CHANNEL_SYSTEM',JSON.stringify({
    74.             'content': content,
    75.             'from': 'user_JC'
    76.         }));
    77.  
    78.     }
    79.     function output(message) {
    80.         var element = $("
      " + message + "
      "      );
    81.         $('#console').prepend(element);
    82.     }
    83.     
    84. script>
    85. html>

    代码简析：

     

    第二个页面，跟第一个基本一样，改一下用户唯一标识：

    TestClientStudentPU.html

    1. html>
    2. <html>
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5.     <title>我要连SOCKETtitle>
    6.     <base>
    7.     <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js">script>
    8.     <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js">script>
    9.     <style>
    10.         body {
    11.             padding: 20px;
    12.         }
    13.         #console {
    14.             height: 450px;
    15.             overflow: auto;
    16.         }
    17.         .msg-color {
    18.             color: green;
    19.         }
    20.     style>
    21. head>
    22.  
    23. <body>
    24. <div id="console" class="well">div>
    25.  
    26.  
    27. <div id="conversationDiv">
    28.     <labal>给系统推消息labal>
    29.     <input type="text" id="content"/>
    30.     <button id="btnSendToSystem" onclick="sendSys();">发送button>
    31. div>
    32.  
    33.  
    34. body>
    35. <script type="text/javascript">
    36.     var socket;
    37.     connect();
    38.  
    39.     function connect() {
    40.         var userFlag = 'user_PU';
    41.         var opts = {
    42.             query: 'userFlag=' + userFlag
    43.         };
    44.         socket = io.connect('http://localhost:8503', opts);
    45.         socket.on('connect', function () {
    46.             console.log("连接成功");
    47.             output('当前用户是：' + userFlag );
    48.             output('连接成功了。');
    49.         });
    50.         socket.on('disconnect', function () {
    51.             output('下线了。 ');
    52.         });
    53.  
    54.         socket.on('CHANNEL_STUDENT', function (data) {
    55.             let msg= JSON.stringify(data)
    56.             output('收到学生频道消息了：' + msg );
    57.             console.log(data);
    58.  
    59.         });
    60.         socket.on('CHANNEL_SYSTEM', function (data) {
    61.             let msg= JSON.stringify(data)
    62.             output('收到系统全局消息了：' + msg );
    63.             console.log(data);
    64.  
    65.         });
    66.  
    67.     }
    68.  
    69.     function sendSys() {
    70.         console.log('发送消息给服务端');
    71.         var content = document.getElementById('content').value;
    72.  
    73.         socket.emit('CHANNEL_SYSTEM',JSON.stringify({
    74.             'content': content,
    75.             'from': 'user_PU'
    76.         }));
    77.  
    78.     }
    79.     function output(message) {
    80.         var element = $("
      " + message + "
      "      );
    81.         $('#console').prepend(element);
    82.     }
    83.  
    84. script>
    85. html>

    OK，把项目跑起来，开始玩。

    直接访问客户端页面 模拟学生 JC连接socket：
    http://127.0.0.1:8089/TestClientStudentJC.html

     可以看到服务端有监测到：

     这里监测的：

     

    先试试客户端给系统推消息先:

     可以看到服务端成功收到消息：
     

     

     这种方式，其实是因为服务监听了相关的频道：

     前端使用JS推到这个系统频道：

    ps： 其实前端给服务端推消息，其实调用接口就可以。

    OK，进入核心应用场景1：

     群发，所有人都能收到
     
     系统给连上的客户端都推送消息

     

    {

    "type": "ALL",

    "content":"你们好,这是一条广播消息,全部人都能收到",

    "channel":"CHANNEL_SYSTEM"

    }

    看看效果：

     

     

      
     然后是场景2，局部群发，部分人群都能收到

    其实也就是通过HTML 客户端监听主题做区分就好：

    直接拉人口，升3 ：


     模拟2个学生，1个老师都连接上了socket

    当然，老师监听的是 老师频道：

    然后我们模拟推送一下消息到指定的老师频道： 

    {

    "type": "ALL",

    "content":"给老师们推一条消息！！！",

    "channel":"CHANNEL_TEACHER"

    }


     

     

    最后一个场景，也就是单点推送，指定某个人收到

    模拟 学生 PU 给 学生JC 推消息：

     

    可以看到在学生频道的JC正常收到了PU的消息：

     

     好了，该篇就到这吧。

     

  • 相关阅读:
    JavaScript逻辑题：输出1000之内的所有完数。所谓完数指的是：如果一个数恰好等于它的所有因子之和，这个数就称为完数。
    有关供应链大赛的一些习得的经验和感受
    Java - SpringBoot整合JWT
    万字C语言之分支语句和循环语句
    Docker容器化技术
    Hadoop Hbase
    Pycharm终端没法敲代码让我看日志重装也那样！
    背靠背 HVDC-MMC模块化多电平转换器输电系统-用于无源网络系统的电能质量调节（Simulink仿真实现）
    Chainlink 预言机的原理解析
    【设计模式】十、组合模式
  • 原文地址：https://blog.csdn.net/qq_35387940/article/details/126058386