SpringBoot：Netty-SocketIO + VUE：SocketIO实现前后端实时双向通信_srpingboot与vue3 soketio

作者：小桥流水78 | 2024-08-13 08:12:05

踩

srpingboot与vue3 soketio

之前项目中一直使用的是RESTful服务形式，逐渐无法满足业务使用需求，于是探索WebSocket这种前后端实时通信方式，整理总结一下完整的功能函数，便于后续归档与复现。

SpringBoot：Netty-SocketIO + VUE：SocketIO实现前后端实时双向通信

一、WebSocket简介

WebSocket是HTML5新增的一种全双工通信协议，客户端和服务端基于TCP握手连接成功后，两者之间就可以建立持久性的连接，实现双向数据传输。

传统HTTP和WebSocket的不同点：
HTTP是单向数据流，客户端向服务端发送请求，服务端响应并返回数据；
WebSocket连接后可以实现客户端和服务端双向数据传递。
由于是新的协议，HTTP的url使用"http//"或"https//"开头；WebSocket的url使用"ws//"开头。

传统HTTP和WebSocket的相同点：
都需要建立TCP连接，都是属于七层协议中的应用层协议。

传统通过HTTP请求模拟双向数据传递的方式是http+Polling(轮询)和http+Long Polling(长轮询)。轮询(Polling)就是客户端定时发送get/post请求向服务端请求数据，这种方式能满足一定的需求，但是存在一些问题，例如如果服务端没有新数据，客户端请求到的数据都是旧数据，这样不仅浪费了带宽资源，而且占用CPU内存。

LongPolling(长轮询)就是在Polling上的一些改进，即如果服务端没有新数据返回给客户端，服务端会把当前的这个服务请求保持住(hold)，当有新数据时则返回新数据，如果超过一定时间服务端仍没有新数据，则服务端返回超时请求，客户端接收到超时请求，然后在发送服务请求，一直循环执行。

虽然一定程度解决了带宽资源和CPU内存浪费情况，但是当服务端数据更新很快，这和轮询（Polling）没有本质上的区别，而且http数据包的头部数据量往往很大（通常有400多个字节），但是真正被服务器需要的数据却很少（有时只有10个字节左右），这样的数据包在网络上周期性的传输，难免对网络带宽是一种浪费。在高并发的情况下，这对服务器是一个很大的挑战。综合上面轮询的种种问题，WebSocket全双工通信成为一种很好的解决策略。

二、Netty-SocketIO 服务端Demo

实际应用中，如果需要WebSocket进行双向数据通信，SocketIO是一个非常好的选择。它是用JavaScript语言实现的WebSocket框架，简单易用，稳定可靠。SocketIO不是WebSocket，它只是将WebSocket和轮询（Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。也就是说，WebSocket仅仅是SocketIO实现实时通信的一个子集。

常用的方式是前端使用SocketIO，后端使用node.js实现SocketIO的接口。但由于目前服务端使用JAVA，所以我使用的是Netty-SocketIO开源库，基于Netty网络库编写的WebSocket实现。

下面是从项目工程中提炼出的Netty-SocketIO服务端Demo：

首先在pom.xml中添加相应的依赖库：

<dependency>
        <groupId>com.corundumstudio.socketio</groupId>
        <artifactId>netty-socketio</artifactId>
        <version>1.7.13</version>
</dependency>
<dependency>
        <groupId>io.socket</groupId>
        <artifactId>socket.io-client</artifactId>
        <version>1.0.0</version>
</dependency>
1
2
3
4
5
6
7
8
9
10

1、添加配置类SocketIOServer

添加SocketIO配置类NettySocketConfig.java，用于填写nettysocket的相关配置信息，注册netty-socketio服务端，相关代码如下：

package nssc.simulation.DataTransmission.socket;

import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.annotation.SpringAnnotationScanner;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;


@Configuration
@Slf4j
public class NettySocketConfig {

    @Bean
    public SocketIOServer socketIOServer() {
        /*
         * 创建Socket，并设置监听端口
         */
        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
        // 设置主机名，默认是0.0.0.0
        // config.setHostname("localhost");
        // 设置监听端口
        config.setPort(9090);
        // 协议升级超时时间（毫秒）, 默认10000, HTTP握手升级为ws协议超时时间
        config.setUpgradeTimeout(10000);
        // Ping消息间隔（毫秒）, 默认25000, 客户端向服务器发送一条心跳消息间隔
        config.setPingInterval(60000);
        // Ping消息超时时间（毫秒）, 默认60000, 这个时间间隔内没有接收到心跳消息就会发送超时事件
        config.setPingTimeout(180000);

        final SocketIOServer server = new SocketIOServer(config);
        return server;
    }

    @Bean
    public SpringAnnotationScanner springAnnotationScanner(SocketIOServer socketServer) {
        return new SpringAnnotationScanner(socketServer);
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2、添加消息结构类MessageInfo

添加消息结构类MessageInfo.java，用于接收前台用户信息，相关代码如下：
消息类型按需自己设计，这里我定义的是byte[]字节数组。

package nssc.simulation.DataTransmission.socket;

import lombok.ToString;
import org.springframework.stereotype.Component;

@Component
@ToString
public class MessageInfoStructure {
    //消息类型
    private String msgType;
    //消息内容
    private byte[] msgContent;

    public String getMsgType() {
        return msgType;
    }
    public void setMsgType(String msgType) {
        this.msgType = msgType;
    }
    public byte[] getMsgContent() {
        return msgContent;
    }
    public void setMsgContent(byte[] msgContent) {
        this.msgContent = msgContent;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3、添加消息处理类MessageEventHandler

添加消息处理类MessageEventHandler.Java，用于前后端消息事件的交互，相关代码如下：

package nssc.simulation.DataTransmission.socket;

import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.HandshakeData;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.annotation.OnConnect;
import com.corundumstudio.socketio.annotation.OnDisconnect;
import com.corundumstudio.socketio.annotation.OnEvent;
import lombok.extern.slf4j.Slf4j;
import nssc.simulation.EmulationDataTransmission.udp.UdpCommonSendSave;
import org.springframework.stereotype.Component;

import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;

@Component
@Slf4j
public class NettySocketEventHandler {
    public static ConcurrentMap<String, SocketIOClient> socketIOClientMap =
            new ConcurrentHashMap<>();

    //socket事件消息接收入口
    @OnEvent(value = "message_event") //value值与前端自行商定
    public void onEvent(SocketIOClient client, AckRequest ackRequest, MessageInfoStructure data) throws Exception {
        //根据msgType类别进行数据类型判断,
        if (data.getMsgType().equals("XXXXXData")){ //数据类型标识
            client.sendEvent("message_event", "已成功接收数据"); //向前端发送接收数据成功标识
            
            //data.getMsgContent()获取前端推送数据
            //......这里可填写接收数据后的相关业务逻辑代码
        }
    }

    //socket添加@OnDisconnect事件，客户端断开连接时调用，刷新客户端信息
    @OnDisconnect
    public void onDisconnect(SocketIOClient client) {
        log.info("--------------------客户端已断开连接--------------------");
        client.disconnect();
    }

    //socket添加connect事件，当客户端发起连接时调用
    @OnConnect
    public void onConnect(SocketIOClient client) {
        if (client != null)
        {
            HandshakeData client_mac = client.getHandshakeData();
            String mac = client_mac.getUrl();
            //存储SocketIOClient，用于向不同客户端发送消息
            socketIOClientMap.put(mac, client);

            log.info("--------------------客户端连接成功---------------------");
        } else {
            log.error("客户端为空");
        }
    }

    /**
     * 广播消息 函数可在其他类中调用
     */
    public static void sendBroadcast(byte[] data) {
        for (SocketIOClient client : socketIOClientMap.values()) { //向已连接的所有客户端发送数据,map实现客户端的存储
            if (client.isChannelOpen()) {
                client.sendEvent("message_event", data);
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

4、添加启动类ServerRunner

在项目服务启动的时候启动socket.io服务, 新增启动类ServerRunner.java，相关代码如下所示：

package nssc.simulation.DataTransmission.socket;

import com.corundumstudio.socketio.SocketIOServer;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

@Component
@Order(value=1)
@Slf4j
public class NettySocketRunnable implements CommandLineRunner {
    private final SocketIOServer server;

    @Autowired
    public NettySocketRunnable(SocketIOServer server) {
        this.server = server;
    }

    @Override
    public void run(String... args) throws Exception {
        log.info("--------------------前端socket.io通信启动成功！---------------------");
        server.start();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

三、SocketIO 客户端Demo

客户端Demo这里参考了Github上的官方开源库SocketIO，按照项目所需功能可以后续进行修改，相关资源链接为：https://download.csdn.net/download/nannan7777/16663466

其主要功能代码如下：

<script src="js/socket.io/socket.io.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>
/**
* 前端js的 socket.emit("事件名","参数数据")方法，是触发后端自定义消息事件的时候使用的,
* 前端js的 socket.on("事件名",匿名函数(服务器向客户端发送的数据))为监听服务器端的事件
**/

var socket =  io.connect('http://localhost:9092');

//监听服务器连接事件
socket.on('connect', function() {
	output('<span class="connect-msg">Client has connected to the server!</span>');
});
//监听服务器端发送消息事件
socket.on('message_event', function(data) { 
  message(data)
  //console.log("服务器发送的消息是："+data); 
}); 
//监听服务器关闭服务事件
socket.on('disconnect', function() {
	output('<span class="disconnect-msg">The client has disconnected!</span>');
});

              function sendDisconnect() {
                      socket.disconnect();
              }
//点击发送消息触发 
function sendMessage() {
                      var message = $('#msg').val();
                      $('#msg').val('');

                      var jsonObject = {userName: userName,
                                        message: message};
                      socket.emit('chatevent', jsonObject);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

前端的测试Demo如下界面所示，可以发送相关数据进行与服务端的双向通信测试：
在这里插入图片描述

至此，SpringBoot：Netty-SocketIO + VUE：SocketIO实现前后端实时双向通信的示例功能已总结完毕，后续会对其他技术与功能模块进行总结，养成良好的开发习惯。

沉迷JAVA研发的乔木小姐
2021.04.13

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/973943