一. 概述

本demo简单介绍WebSocke的服务的搭建及事件监听处理及推送时间

二. WebSocke服务搭建

2.1 引入依赖

<dependency>
            <groupId>com.corundumstudio.socketio</groupId>
            <artifactId>netty-socketio</artifactId>
            <version>1.7.16</version>
</dependency>
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.2 websocket服务器配置

websocket服务器配置，包括服务器IP、端口信息、以及连接认证等配置

@Configuration
@EnableConfigurationProperties({WsConfig.class})
public class ServerConfig {

    @Bean
    public SocketIOServer server(WsConfig wsConfig) {
        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
        config.setHostname("127.0.0.1");
        config.setPort("8081");

        //这个listener可以用来进行身份验证
        config.setAuthorizationListener(data -> {
            // http://localhost:8081?token=xxxxxxx
            // 例如果使用上面的链接进行connect，可以使用如下代码获取用户密码信息，本文不做身份验证
            String token = data.getSingleUrlParam("token");
            // 校验token的合法性，实际业务需要校验token是否过期
            // 如果认证不通过会返回一个 Socket.EVENT_CONNECT_ERROR 事件
            return true;
        });

        return new SocketIOServer(config);
    }

    /**
     * Spring 扫描自定义注解
     */
    @Bean
    public SpringAnnotationScanner springAnnotationScanner(SocketIOServer server) {
        return new SpringAnnotationScanner(server);
    }
}

2.3 时间监听处理器

核心事件处理类，主要处理客户端发起的消息事件，以及主动往客户端发起事件

import cn.hutool.core.lang.Dict;
import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.annotation.OnConnect;
import com.corundumstudio.socketio.annotation.OnDisconnect;
import com.corundumstudio.socketio.annotation.OnEvent;
import com.xkcoding.websocket.socketio.config.Event;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.util.Map;
import java.util.UUID;

@Component
@Slf4j
public class MessageEventHandler {
    
    @Autowired
    private SocketIOServer server;

    /**
     * 添加connect事件，当客户端发起连接时调用
     *
     * @param client 客户端对象
     */
    @OnConnect
    public void onConnect(SocketIOClient client) {
        String token = client.getHandshakeData().getSingleUrlParam("token");
        // ...业务处理
    }

    /**
     * 添加disconnect事件，客户端断开连接时调用，刷新客户端信息
     *
     * @param client 客户端对象
     */
    @OnDisconnect
    public void onDisconnect(SocketIOClient client) {
        String token = client.getHandshakeData().getSingleUrlParam("token");
        // ...业务处理
    }

    /**
     * 自定义时间
     *
     * @param client  客户端
     * @param request 请求
     * @param data    数据
     */
    @OnEvent(value = "自定义名")
    public void onEvent(SocketIOClient client, AckRequest request, Map data) {
        // ... 业务处理
        
        // 消息响应
        request.sendAckData(Dict.create().set("flag", true).set("message", "处理成功"));
    }


    /**
     * 推送消息
     * @param groupId 会话组ID
     * @param sessionId 会话ID
     * @param content 发生内容
     */
    public void sendMsg(SocketIOClient client,String groupId,UUID sessionId,String content) {
        // 将客户加入房间
        client.joinRoom(groupId);
        // 群发消息
        server.getRoomOperations(groupId).sendEvent(Event.GROUP, content);
        // 单个会话推送消息
        server.getClient(sessionId).sendEvent(Event.CHAT, content);
        
    }
}

2.4 websocket 服务器启动类

@Component
@Slf4j
public class ServerRunner implements CommandLineRunner {
    @Autowired
    private SocketIOServer server;

    @Override
    public void run(String... args) {
        server.start();
        log.info("websocket 服务器启动成功。。。");
    }
}

三. 前端

<!--  socket.io.js 文件可以自己百度下载  -->
    <script src="js/socket.io/socket.io.js"></script>
    <script>
        import io from "./js/socket.io/socket.io";
        const url = `http://127.0.0.1:8081?token=123456`;
        const socket = io.connect(url);

        // 连接
        function sendConnect() {
          socket.connect();
        }
        
        // 连接时间监听
        socket.on('connect', function () {
        });

        // 断开时间监听
        socket.on('disconnect', function () {
        });

        // 自定义时间监听
        socket.on('自定义名', function (data) {
        });

        // 断开
        function sendDisconnect() {
            socket.disconnect();
        }

        // 事件推送
        function sendJoin() {
          // 数据
          let data = {}
          socket.emit('自定义名', data);
        }
    </script>