一. 概述
本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>
