一、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.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); } }
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; } }
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); } } } }
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(); } }
三、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>
至此，SpringBoot：Netty-SocketIO + VUE：SocketIO实现前后端实时双向通信的示例功能已总结完毕。
