当前位置:   article > 正文

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

vue nettyio

转载:
https://blog.csdn.net/nannan7777/article/details/115676900

一、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
  • 11

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
  • 41

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
  • 27

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
  • 68

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
  • 40

在这里插入图片描述

至此,SpringBoot:Netty-SocketIO + VUE:SocketIO实现前后端实时双向通信的示例功能已总结完毕。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/404246
推荐阅读
相关标签
  

闽ICP备14008679号