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

转x33g5p2x  于2022-08-17 转载在 Spring  
字(12.5k)|赞(0)|评价(0)|浏览(625)

本篇内容：

后端 + 前端简单HTML页面

功能场景点：

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

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

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

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

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

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

不多说，开始：

 ① pom引入核心依赖

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

 ② yml加上配置项

  1. server:
  2.   port: 8089
  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;
  8. /**
  9.  * @Author: JCccc
  10.  * @Description:
  11.  * @Date: 2022/06/13 21:50
  12.  */
  13. @Configuration
  14. public class MySocketConfig{
  16.     @Value("${socketio.host}")
  17.     private String host;
  19.     @Value("${socketio.port}")
  20.     private Integer port;
  22.     @Value("${socketio.bossCount}")
  23.     private int bossCount;
  25.     @Value("${socketio.workCount}")
  26.     private int workCount;
  28.     @Value("${socketio.allowCustomRequests}")
  29.     private boolean allowCustomRequests;
  31.     @Value("${socketio.upgradeTimeout}")
  32.     private int upgradeTimeout;
  34.     @Value("${socketio.pingTimeout}")
  35.     private int pingTimeout;
  37.     @Value("${socketio.pingInterval}")
  38.     private int pingInterval;
  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.     }
  50.     /**
  51.      * 扫描netty-socketIo的注解( @OnConnect、@OnEvent等）
  52.      */
  53.     @Bean
  54.     public SpringAnnotationScanner springAnnotationScanner() {
  55.         return new SpringAnnotationScanner(socketIOServer());
  56.     }
  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 {
  8.     private String type;
  10.     private String content;
  12.     private String from;
  14.     private String to;
  16.     private String channel;
  18.     public String getType() {
  19.         return type;
  20.     }
  22.     public void setType(String type) {
  23.         this.type = type;
  24.     }
  26.     public String getContent() {
  27.         return content;
  28.     }
  30.     public void setContent(String content) {
  31.         this.content = content;
  32.     }
  34.     public String getFrom() {
  35.         return from;
  36.     }
  38.     public void setFrom(String from) {
  39.         this.from = from;
  40.     }
  42.     public String getTo() {
  43.         return to;
  44.     }
  46.     public void setTo(String to) {
  47.         this.to = to;
  48.     }
  50.     public String getChannel() {
  51.         return channel;
  52.     }
  54.     public void setChannel(String channel) {
  55.         this.channel = channel;
  56.     }
  57. }

代码简析：

 

⑤创建 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;
  13. /**
  14.  * @Author: JCccc
  15.  * @Description:
  16.  * @Date: 2022/6/23 21:21
  17.  */
  18. @Component
  19. public class MySocketHandler {
  20.     private final Logger log = LoggerFactory.getLogger(this.getClass());
  21.     @Autowired
  22.     private SocketIOServer socketIoServer;
  23.     @PostConstruct
  24.     private void start(){
  25.         try {
  26.             socketIoServer.start();
  27.         }catch (Exception e){
  28.             e.printStackTrace();
  29.         }
  30.     }
  31.     @PreDestroy
  32.     private void destroy(){
  33.         try {
  34.         socketIoServer.stop();
  35.         }catch (Exception e){
  36.             e.printStackTrace();
  37.         }
  38.     }
  39.     @OnConnect
  40.     public void connect(SocketIOClient client) {
  41.         String userFlag = client.getHandshakeData().getSingleUrlParam("userFlag");
  42.         SocketUtil.connectMap.put(userFlag, client);
  43.         log.info("客户端userFlag: "+ userFlag+ "已连接");
  44.     }
  45.     @OnDisconnect
  46.     public void onDisconnect(SocketIOClient client) {
  47.         String userFlag = client.getHandshakeData().getSingleUrlParam("userFlag");
  48.         log.info("客户端userFlag:" + userFlag + "断开连接");
  49.         SocketUtil.connectMap.remove(userFlag, client);
  50.     }
  51. }

代码简析：

 ⑥ 封装的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;
  12. import java.util.Map;
  13. import java.util.Objects;
  14. import java.util.concurrent.ConcurrentHashMap;
  15. import java.util.concurrent.ConcurrentMap;
  17. /**
  18.  * @Author: JCccc
  19.  * @Description:
  20.  * @Date: 2022/6/23 21:28
  21.  */
  22. @Component
  23. public class SocketUtil {
  25.     private final Logger log = LoggerFactory.getLogger(this.getClass());
  27.     //暂且把用户&客户端信息存在缓存
  28.     public static ConcurrentMap<String, SocketIOClient> connectMap = new ConcurrentHashMap<>();
  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.     }
  41.     public void sendToAll(Map<String, Object> msg,String sendChannel) {
  42.         if (connectMap.isEmpty()){
  43.             return;
  44.         }
  45.         //给在这个频道的每个客户端发消息
  46.         for (Map.Entry<String, SocketIOClient> entry : connectMap.entrySet()) {
  47.             entry.getValue().sendEvent(sendChannel, msg);
  48.         }
  49.     }
  51.     public void sendToOne(String userFlag, Map<String, Object> msg,String sendChannel) {
  52.         //拿出某个客户端信息
  53.         SocketIOClient socketClient = getSocketClient(userFlag);
  54.         if (Objects.nonNull(socketClient) ){
  55.             //单独给他发消息
  56.             socketClient.sendEvent(sendChannel,msg);
  57.         }
  58.     }
  60.     /**
  61.      * 识别出客户端
  62.      * @param userFlag
  63.      * @return
  64.      */
  65.     public SocketIOClient getSocketClient(String userFlag){
  66.         SocketIOClient client = null;
  67.         if (StringUtils.hasLength(userFlag) &&  !connectMap.isEmpty()){
  68.             for (String key : connectMap.keySet()) {
  69.                 if (userFlag.equals(key)){
  70.                     client = connectMap.get(key);
  71.                 }
  72.             }
  73.         }
  74.         return client;
  75.     }
  78. }

代码简析：

⑦写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.*;
  6. import java.util.HashMap;
  7. import java.util.Map;
  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;
  21.     @PostMapping("/testSendMsg")
  22.     public String testSendMsg(@RequestBody MyMessage myMessage){
  23.         Map<String, Object> map = new HashMap<>();
  24.         map.put("msg",myMessage.getContent());
  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.         }
  37.         return "fail";
  38.     }
  39. }

代码简析：

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

前端简单页面

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

第一个页面：
TestClientStudentJC.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>我要连SOCKET</title>
  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>
  23. <body>
  24. <div id="console" class="well"></div>
  26. <div id="conversationDiv">
  27.     <labal>给系统推消息</labal>
  28.     <input type="text" id="content"/>
  29.     <button id="btnSendToSystem" onclick="sendSys();">发送</button>
  30. </div>
  32. </body>
  33. <script type="text/javascript">
  34.     var socket;
  35.     connect();
  37.     function connect() {
  38.         var userFlag = 'user_JC';
  39.         var opts = {
  40.             query: 'userFlag=' + userFlag
  41.         };
  42.         socket = io.connect('http://localhost:8503', opts);
  43.         socket.on('connect', function () {
  44.             console.log("连接成功");
  45.             output('当前用户是：' + userFlag );
  46.             output('<span class="msg-color">连接成功了。</span>');
  47.         });
  48.         socket.on('disconnect', function () {
  49.             output('<span class="msg-color">下线了。 </span>');
  50.         });
  52.         socket.on('CHANNEL_STUDENT', function (data) {
  53.             let msg= JSON.stringify(data)
  54.             output('收到学生频道消息了：' + msg );
  55.             console.log(data);
  57.         });
  58.         socket.on('CHANNEL_SYSTEM', function (data) {
  59.             let msg= JSON.stringify(data)
  60.             output('收到系统全局消息了：' + msg );
  61.             console.log(data);
  63.         });
  65.     }
  67.     function sendSys() {
  68.         console.log('发送消息给服务端');
  69.         var content = document.getElementById('content').value;
  71.         socket.emit('CHANNEL_SYSTEM',JSON.stringify({
  72.             'content': content,
  73.             'from': 'user_JC'
  74.         }));
  76.     }
  77.     function output(message) {
  78.         var element = $("<div>" + message + "</div>");
  79.         $('#console').prepend(element);
  80.     }
  81.     
  82. </script>
  83. </html>

代码简析：

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

TestClientStudentPU.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>我要连SOCKET</title>
  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>
  23. <body>
  24. <div id="console" class="well"></div>
  26. <div id="conversationDiv">
  27.     <labal>给系统推消息</labal>
  28.     <input type="text" id="content"/>
  29.     <button id="btnSendToSystem" onclick="sendSys();">发送</button>
  30. </div>
  32. </body>
  33. <script type="text/javascript">
  34.     var socket;
  35.     connect();
  37.     function connect() {
  38.         var userFlag = 'user_PU';
  39.         var opts = {
  40.             query: 'userFlag=' + userFlag
  41.         };
  42.         socket = io.connect('http://localhost:8503', opts);
  43.         socket.on('connect', function () {
  44.             console.log("连接成功");
  45.             output('当前用户是：' + userFlag );
  46.             output('<span class="msg-color">连接成功了。</span>');
  47.         });
  48.         socket.on('disconnect', function () {
  49.             output('<span class="msg-color">下线了。 </span>');
  50.         });
  52.         socket.on('CHANNEL_STUDENT', function (data) {
  53.             let msg= JSON.stringify(data)
  54.             output('收到学生频道消息了：' + msg );
  55.             console.log(data);
  57.         });
  58.         socket.on('CHANNEL_SYSTEM', function (data) {
  59.             let msg= JSON.stringify(data)
  60.             output('收到系统全局消息了：' + msg );
  61.             console.log(data);
  63.         });
  65.     }
  67.     function sendSys() {
  68.         console.log('发送消息给服务端');
  69.         var content = document.getElementById('content').value;
  71.         socket.emit('CHANNEL_SYSTEM',JSON.stringify({
  72.             'content': content,
  73.             'from': 'user_PU'
  74.         }));
  76.     }
  77.     function output(message) {
  78.         var element = $("<div>" + message + "</div>");
  79.         $('#console').prepend(element);
  80.     }
  82. </script>
  83. </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的消息：

好了，该篇就到这吧。

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/qq_35387940/article/details/126058386

内容来源于网络，如有侵权，请联系作者删除！

Javawebsocketsocket点对点群发广播

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com