之前项目中一直使用的是
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、添加配置类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