Springboot 集成 netty-socketio + Vue前端分离_netty-socketio+vue

Springboot 集成netty-socketio

 netty-socketio： 仿`node.js`实现的socket.io服务端
 1.将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口
 2.使用时，不用担心兼容问题，底层会自动选用最佳的通信方式
 3.适合进行服务端和客户端双向数据通信
1
2
3
4

pom.xml

 <!-- socket.io服务端 -->
<dependency>
     <groupId>com.corundumstudio.socketio</groupId>
     <artifactId>netty-socketio</artifactId>
     <version>1.7.7</version>
 </dependency>
 <!-- socket.io客户端 -->
 <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
12

yml配置

# netty-socketio 配置
socketio:
  host: 0.0.0.0
  port: 30916
  # 设置最大每帧处理数据的长度，防止他人利用大数据来攻击服务器
  maxFramePayloadLength: 1048576
  # 设置http交互最大内容长度
  maxHttpContentLength: 1048576
  # socket连接数大小（如只监听一个端口boss线程组为1即可）
  bossCount: 1
  workCount: 100
  allowCustomRequests: true
  # 协议升级超时时间（毫秒），默认10秒。HTTP握手升级为ws协议超时时间
  upgradeTimeout: 1000000
  # Ping消息超时时间（毫秒），默认60秒，这个时间间隔内没有接收到心跳消息就会发送超时事件
  pingTimeout: 6000000
  # Ping消息间隔（毫秒），默认25秒。客户端向服务器发送一条心跳消息间隔
  pingInterval: 25000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

config配置

@Slf4j
@Configuration
public class SocketIoConfig {

    /**
     * socketio server 主机地址 设置主机名，默认是0.0.0.0
     */
    @Value("${socketio.host}")
    private String host;

    /**
     * socketio 端口
     */
    @Value("${socketio.port}")
    private Integer port;

    /**
     * socket连接数大小（如只监听一个端口boss线程组为1即可）
     */
    @Value("${socketio.bossCount}")
    private int bossCount;
    /**
     * 工作线程
     */
    @Value("${socketio.workCount}")
    private int workCount;

    /**
     * 允许服务自定义请求与socket.io协议不同。
     */
    @Value("${socketio.allowCustomRequests}")
    private boolean allowCustomRequests;
    /**
     * 协议升级超时时间（毫秒），默认10秒。HTTP握手升级为ws协议超时时间
     */
    @Value("${socketio.upgradeTimeout}")
    private int upgradeTimeout;
    /**
     *
     * Ping消息超时时间（毫秒），默认60秒，这个时间间隔内没有接收到心跳消息就会发送超时事件
     */
    @Value("${socketio.pingTimeout}")
    private int pingTimeout;
    /**
     * Ping消息间隔（毫秒），默认25秒。客户端向服务器发送一条心跳消息间隔
     */
    @Value("${socketio.pingInterval}")
    private int pingInterval;

    @Bean
    public SocketIOServer socketIOServer() {
        SocketConfig socketConfig = new SocketConfig();
        // 项目重启后，socket的端口在短时间内没有完全释放，就会出现上述提示，端口被占用
        // java.net.BindException: Address already in use 解决项目重启的时候，地址被占用。
        if (!socketConfig.isReuseAddress()) {
            socketConfig.setReuseAddress(true);
            System.out.println("是否绑定了: " + socketConfig.isReuseAddress());
        }
        /*
         * 创建Socket，并设置监听端口
         */
        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
        config.setSocketConfig(socketConfig);
        // 判断是否指定主机地址。默认0.0.0.0
        if (StringUtils.isNotBlank(host)) {
            config.setHostname(host);
        }
        config.setPort(port);
        config.setBossThreads(bossCount);
        config.setWorkerThreads(workCount);
        config.setAllowCustomRequests(allowCustomRequests);
        config.setUpgradeTimeout(upgradeTimeout);
        config.setPingTimeout(pingTimeout);
        config.setPingInterval(pingInterval);
        // 这个版本0.9.0不能处理好namespace和query参数的问题。所以为了做认证必须使用全局默认命名空间
        config.setAuthorizationListener(data -> {
                    // 可以使用如下代码获取用户密码信息
                    String username = data.getSingleUrlParam("username");
                    String xToken = data.getSingleUrlParam("x-token");
                    log.info("连接参数：username=" + username + ",xToken=" + xToken);
                    // MD5盐
                    // 如果认证不通过会返回一个Socket.EVENT_CONNECT_ERROR事件
                    // 校验token 权限
                    return true;
                }
        );
        return new SocketIOServer(config);
    }

    /**
     * 注册socket-io 注解
     *
     * @param socketServer socketIo 服务
     * @return
     */
    @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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

注意当服务的主机ip 不是固定的时候，setHostname 默认为0.0.0.0 ，不然其他机器不能调用

随项目启动时启动

/**
 * 项目启动成功后，启动socket-io 服务
 */
@Slf4j
@Component
public class SocketIoInitListener implements ApplicationListener<ApplicationReadyEvent> {

    private final SocketIOServer server;

    public SocketIoInitListener(SocketIOServer server) {
        this.server = server;
    }

    @Override
    public void onApplicationEvent(ApplicationReadyEvent applicationReadyEvent) {

        server.start();
        log.info("--------------------------------------");
        log.info("socket.io启动成功: " + server.getConfiguration().getPort());
        log.info("--------------------------------------");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

项目关闭的时候关闭

/**
 * 项目关闭后，关闭socket-io 服务
 */
@Slf4j
@Component
public class SocketIoStopListener implements ApplicationListener<ContextClosedEvent> {
    private final SocketIOServer server;

    public SocketIoStopListener(SocketIOServer server) {
        this.server = server;
    }


    // 监听kill pid     无法监听 kill -9 pid
    @Override
    public void onApplicationEvent(ContextClosedEvent contextClosedEvent) {

        server.stop();
        log.info("--------------------------------------");
        log.info("socket.io 关闭成功");
        log.info("--------------------------------------");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

vue 前端代码

安装vue-socket.io

npm install vue-socket.io --save
1

main.js

import VueSocketIO from 'vue-socket.io'

// socketio
Vue.use(new VueSocketIO({
  debug: true,
  connection: '/',
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  },
  options: { path: '/socket.io', transports: ['websocket'] }
}))

1
2
3
4
5
6
7
8
9
10
11
12
13
14

devServer

proxy: {
    '/socket.io': {
        // target: 'http://socket-io-service::30916',
        target: 'http://127.0.0.1:30916',
        ws: true,
        // logLevel: 'debug',
        // secure: false,
        changeOrigin: true,
        pathRewrite: {
        '^/socket.io': '/socket.io'
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

nginx.cfg

#socket.io配置
location /socket.io {
#             proxy_pass http://10.68.97.14:30916/socket.io;
   # socket-io-service 是后端项目名称,也是k8s的service 名称
    proxy_pass http://socket-io-service:30916/socket.io;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}
1
2
3
4
5
6
7
8
9
10

App.vue

  sockets: {
    // 客户端connect事件，服务端可针对connect进行信息传输
    connect: function (data) {
      this.$message.info('成功')
    },
    // 链接状态
    connected: function (data) {
      this.$message.info(data + '成功')
    },
    // 接收服务器推送消息
    push_data_event: function (data) {
      console.log('服务器广播消息', data)
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这里我使用的是 当您在安装中设置 store 参数时，Vue-Socket.io 将开始向 Vuex store 发送事件。如果为 vuex 设置了两个前缀，则可以同时使用 actions 和 mutations。但是，最好的使用方法就是actions

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    mutations: {
        "<MUTATION_PREFIX><EVENT_NAME>"() {
            // do something
        }
    },
    actions: {
        "<ACTION_PREFIX><EVENT_NAME>"() {
            // do something
        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里的<ACTION_PREFIX> 前缀：指的是前面。 actionPrefix: ‘SOCKE_’，<EVENT_NAME> 指的是后端发送的事件名称。