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

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

一、WebSocket简介

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

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

传统HTTPWebSocket的相同点:
都需要建立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
  • 6
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot是一个非常流行的Java开发框架,而Netty-socketio是一个基于Netty框架的WebSocket实现,提供了方便的实时通信解决方案。将它们结合起来,可以实现高效的WebSocket通信服务。 下面是整合的步骤: 1. 添加依赖 在pom.xml文件中添加以下依赖: ``` <dependency> <groupId>com.corundumstudio.socketio</groupId> <artifactId>netty-socketio</artifactId> <version>1.7.16</version> </dependency> ``` 2. 编写Netty-socketio服务 创建一个类,继承自SpringBoot的ApplicationListener接口,用于启动Netty-socketio服务。 ``` import com.corundumstudio.socketio.Configuration; import com.corundumstudio.socketio.SocketIOServer; import org.springframework.beans.factory.annotation.Value; import org.springframework.boot.context.event.ApplicationReadyEvent; import org.springframework.context.ApplicationListener; import org.springframework.stereotype.Component; @Component public class NettySocketIoServer implements ApplicationListener<ApplicationReadyEvent> { @Value("${socketio.host}") private String host; @Value("${socketio.port}") private Integer port; private SocketIOServer server; @Override public void onApplicationEvent(ApplicationReadyEvent event) { Configuration config = new Configuration(); config.setHostname(host); config.setPort(port); server = new SocketIOServer(config); server.start(); } } ``` 其中,@Value注解用于从配置文件中读取host和port的值,SocketIOServer是Netty-socketio提供的服务类,用于启动和管理WebSocket服务。 3. 配置WebSocket处理器 创建一个类,继承自Spring BootWebSocketHandler接口,用于处理WebSocket连接和消息。 ``` import com.corundumstudio.socketio.SocketIOClient; import com.corundumstudio.socketio.SocketIOServer; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import org.springframework.web.socket.WebSocketSession; import org.springframework.web.socket.handler.TextWebSocketHandler; @Component public class SocketIoHandler extends TextWebSocketHandler { @Autowired private SocketIOServer server; @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { super.afterConnectionEstablished(session); SocketIOClient client = server.getClient(session.getId()); if (client == null) { client = server.addClient(session); } } @Override public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { super.handleTextMessage(session, message); SocketIOClient client = server.getClient(session.getId()); if (client != null) { client.sendEvent("message", message.getPayload()); } } } ``` 其中,@Autowired注解用于从Spring容器中获取SocketIOServer实例,afterConnectionEstablished方法用于处理WebSocket连接建立时的逻辑,handleTextMessage方法用于处理WebSocket消息。 4. 配置WebSocket处理器映射 创建一个WebSocketHandlerRegistry类,用于配置WebSocket处理器的映射关系。 ``` import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.config.annotation.EnableWebSocket; import org.springframework.web.socket.config.annotation.WebSocketConfigurer; import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Autowired private SocketIoHandler socketIoHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(socketIoHandler, "/ws").setAllowedOrigins("*"); } } ``` 其中,@EnableWebSocket注解用于开启WebSocket支持,registerWebSocketHandlers方法用于配置WebSocket处理器映射关系。 5. 配置application.yml 在application.yml文件中添加以下配置: ``` socketio: host: localhost port: 8080 ``` 其中,host和port的值应与Netty-socketio服务的配置一致。 6. 运行程序 现在,可以运行程序,并访问http://localhost:8080/ws,即可建立WebSocket连接。发送消息时,可以使用socket.emit()方法,接收消息时,可以使用socket.on()方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值