1.前端框架 Socket.IO
官方文档:https://socket.io/docs/v4/client-api/#iourl
Socket.IO 是一个库,它支持客户端和服务器之间的低延迟、双向和基于事件的通信。
Socket.IO连接可以通过不同的底层传输建立:
- HTTP长轮询
- WebSocket
- WebTransport
Socket.IO将自动选择最佳可用选项
优点:
- 在WebSocket连接无法建立的情况下,连接将退回到HTTP长轮询
- 当客户端最终断开连接时,为了不使服务器不堪重负,它会自动以指数级的后退延迟重新连接。
- 当客户端断开连接时,报文将被自动缓冲,并在重新连接时发送。
2. java后端框架 netty-socketio
特点:
- 支持xhr-polling transport(xhr轮询传输)
- 支持websocket传输
- 支持namespaces and rooms
- 支持返回(接收数据的确认)
- 支持SSL
- 支持客户端存储(Memory, Redisson, Hazelcast)
- 支持跨网络socket节点的分布式广播(Redisson, Hazelcast)
- 支持OSGi
- 支持Spring
- 包含JPMS的Java模块信息。
- 无锁和线程安全的实现
- 通过注解进行声明式处理程序配置
3.java服务端实现
3.1 创建maven项目netty-socketio-learn
maven pom.xml配置:
xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>netty-socketio-learn</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<hutool.version>5.8.11</hutool.version>
<spring.boot.version>3.3.1</spring.boot.version>
</properties>
<dependencyManagement>
<dependencies>
<!-- 统一依赖管理 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring.boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<!-- netty-socketio-->
<dependency>
<groupId>com.corundumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId>
<version>2.0.11</version>
</dependency>
<!-- hutool-all-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>${hutool.version}</version>
</dependency>
<!-- Web 相关 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
<!-- 使用 huawei / aliyun 的 Maven 源,提升下载速度 -->
<repositories>
<repository>
<id>huaweicloud</id>
<name>huawei</name>
<url>https://mirrors.huaweicloud.com/repository/maven/</url>
</repository>
<repository>
<id>aliyunmaven</id>
<name>aliyun</name>
<url>https://maven.aliyun.com/repository/public</url>
</repository>
<repository>
<id>spring-milestones</id>
<name>Spring Milestones</name>
<url>https://repo.spring.io/milestone</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
<repository>
<id>spring-snapshots</id>
<name>Spring Snapshots</name>
<url>https://repo.spring.io/snapshot</url>
<releases>
<enabled>false</enabled>
</releases>
</repository>
</repositories>
</project>
3.2 ChatServer实现
java
package cn.netty.socketio.learn;
import cn.hutool.core.lang.Assert;
import cn.hutool.core.lang.Opt;
import cn.hutool.core.util.StrUtil;
import com.corundumstudio.socketio.*;
import com.corundumstudio.socketio.store.MemoryStoreFactory;
import com.corundumstudio.socketio.store.StoreFactory;
import java.util.concurrent.atomic.AtomicInteger;
/**
* ChatServer
*/
public class ChatServer {
private static final AtomicInteger USER_NUMBER = new AtomicInteger();
/**
* host name
*/
private static final String HOST_NAME = "localhost";
/**
* port
*/
private static final int PORT = 9093;
private static final String USER_NAME = "userName";
private static final String USER_ID = "userId";
public static void main(String[] args) {
Configuration config = new Configuration();
config.setHostname(HOST_NAME);
config.setPort(PORT);
// client 存储工厂
StoreFactory storeFactory = new MemoryStoreFactory();
config.setStoreFactory(storeFactory);
// 解决对此重启服务时,netty端口被占用问题 重复使用地址
config.getSocketConfig().setReuseAddress(true);
// 支持在线人数
config.setWorkerThreads(100);
// tcpNoDelay (boolean):
// 如果设置为true,则禁用Nagle算法,这可以减少小数据包的延迟。
// 基本原理:Nagle算法试图将多个小的数据包合并成一个较大的数据包再发送出去,这样可以减少网络中的数据包数量,
// 从而提高带宽利用率。当应用发送少量数据时,TCP并不会立即将这些数据发送出去,而是等待一段时间(比如等待应用发送更多的数据),直到数据量达到一定阈值或超时后再一起发送
// tcpSendBufferSize (int):
// 设置发送缓冲区大小。如果设置为-1,则使用系统默认值。
// tcpReceiveBufferSize (int):
// 设置接收缓冲区大小。如果设置为-1,则使用系统默认值。
// tcpKeepAlive (boolean):
// 如果设置为true,则启用TCP的保活机制,可以在长时间没有数据传输后检测连接是否仍然有效。
// soLinger (int):
// 设置关闭连接前等待未发送完的数据的时间。如果是-1,则立即关闭连接而不等待。
// reuseAddress (boolean):
// 如果设置为true,则允许重用地址和端口,即使之前绑定过这个端口也行。
// acceptBackLog (int):
// 设置监听队列长度,即内核为该socket保留的已完成三次握手但尚未被accept()接受的连接的最大数目。
final SocketIOServer server = new SocketIOServer(config);
// 设置命名空间 前端socket连接地址:http://localhost:9093/chat
SocketIONamespace socketIONamespace = server.addNamespace("/chat");
// token验证
socketIONamespace.addAuthTokenListener((authToken, client) -> {
// 根据token获取用户信息
System.out.println("token:" + authToken);
Integer userId = USER_NUMBER.incrementAndGet();
// 设置用户信息
client.set(USER_ID, userId);
String userName = getUserName(userId);
client.set(USER_NAME, userName);
System.out.println(StrUtil.format("token:{},用户:{} 验证成功!", authToken, userName));
return AuthTokenResult.AuthTokenResultSuccess;
});
// 创建链接
socketIONamespace.addConnectListener(client -> {
String userName = client.get(USER_NAME);
System.out.println(StrUtil.format("用户:{} 连接成功!", userName));
});
// 用户信息
socketIONamespace.addEventListener("user", Object.class, (client, data, ackSender) -> {
String userName = client.get(USER_NAME);
// 返回用户昵称
ackSender.sendAckData(userName);
});
// 消息事件处理
socketIONamespace.addEventListener("message", Object.class, (client, data, ackSender) ->
Opt.ofEmptyAble(socketIONamespace.getAllClients()).ifPresent(clients -> {
// 发送消息给所有用户
socketIONamespace.getBroadcastOperations().sendEvent("message", data);
}));
// 用户主动退出处理
socketIONamespace.addDisconnectListener(client -> {
String userName = client.get(USER_NAME);
System.out.println(StrUtil.format("用户:{} 断开连接!", userName));
});
server.start();
}
/**
* 获取用户名称
*
* @param userId
* @return
*/
private static String getUserName(Integer userId) {
Assert.notNull(userId);
return "用户" + userId;
}
}
4. vue3客户端实现
使用Vue 3和socket.io-client来实现一个网页在线聊天应用:
vue3安装教程:https://socket.io/docs/v4/client-installation/
4.1 核心代码Chat.vue
html
<template>
<div>
<h1>在线聊天室</h1>
<ul>
<li v-for="message in messages" :key="message.id">
{{ message.nickName }}: {{ message.text }}
</li>
</ul>
<input v-model="newMessage" @keyup.enter="sendMessage">
<button @click="sendMessage">发送</button>
</div>
</template>
<script setup>
import {ref, onMounted} from 'vue';
import {Manager} from "socket.io-client";
// 连接地址
const URL = process.env.NODE_ENV === "production" ? undefined : "http://localhost:9093";
// 如果管理器初始化时autoConnect设置为false,则启动新的连接尝试。
const manager = new Manager(URL, { autoConnect: true });
const socket = manager.socket("/chat", { auth: { token: "123" } });
// 数据绑定
const messages = ref([]);
const newMessage = ref('');
const nickName = ref('');
// 初始化 Socket.IO 连接
onMounted(() => {
// 连接成功事件
socket.on('connect', () => {
console.log('Connected to the server');
socket.emit('user', nickName.value, (response) => {
nickName.value = response;
});
});
// 接收消息事件
socket.on('message', (msg) => {
messages.value.push(msg);
});
// 断开连接事件
socket.on('disconnect', () => {
console.log('Disconnected from the server');
});
});
// 发送消息方法
const sendMessage = () => {
if (newMessage.value.trim() !== '') {
socket.emit('message', {text: newMessage.value, id: Date.now(), nickName: nickName.value});
newMessage.value = '';
}
};
</script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
input[type="text"] {
padding: 5px;
margin-right: 5px;
}
button {
padding: 5px 10px;
}
</style>
5.运行效果
浏览器1:
浏览器2:
6.spring boot3和netty-socketio整合
6.1 application.yaml配置
yaml
server:
port: 8089
spring:
application:
name: chat-server
main:
allow-circular-references: true # 允许循环依赖,因为项目是三层架构,无法避免这个情况。
# Servlet 配置
servlet:
# 文件上传相关配置项
multipart:
max-file-size: 16MB # 单个文件大小
max-request-size: 32MB # 设置总上传的文件大小
# Jackson 配置项
jackson:
serialization:
write-dates-as-timestamps: true # 设置 Date 的格式,使用时间戳
write-date-timestamps-as-nanoseconds: false # 设置不使用 nanoseconds 的格式。例如说 1611460870.401,而是直接 1611460870401
write-durations-as-timestamps: true # 设置 Duration 的格式,使用时间戳
fail-on-empty-beans: false # 允许序列化无属性的 Bean
debug: false
6.2 ChatSocketIOServer.java
java
package cn.netty.socketio.learn;
import cn.hutool.core.lang.Assert;
import cn.hutool.core.lang.Opt;
import cn.hutool.core.util.StrUtil;
import com.corundumstudio.socketio.*;
import com.corundumstudio.socketio.annotation.OnConnect;
import com.corundumstudio.socketio.annotation.OnDisconnect;
import com.corundumstudio.socketio.annotation.OnEvent;
import com.corundumstudio.socketio.store.MemoryStoreFactory;
import com.corundumstudio.socketio.store.StoreFactory;
import org.springframework.boot.CommandLineRunner;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import java.util.concurrent.atomic.AtomicInteger;
/**
* ChatSocketIOServer
* spring boot 应用启动后立即执行一些初始化任务
*/
@Component
public class ChatSocketIOServer implements CommandLineRunner {
private final SocketIOServer server;
private final SocketIONamespace socketIONamespace;
public ChatSocketIOServer() {
// 创建 SocketIOServer
server = new SocketIOServer(buildConfig());
// 创建 socketIONamespace
socketIONamespace = server.addNamespace("/chat");
}
@Bean
public EventHandler eventHandler() {
return new EventHandler(socketIONamespace);
}
private static final AtomicInteger USER_NUMBER = new AtomicInteger();
/**
* host name
*/
private static final String HOST_NAME = "localhost";
/**
* port
*/
private static final int PORT = 9093;
private static final String USER_NAME = "userName";
private static final String USER_ID = "userId";
public Configuration buildConfig() {
Configuration config = new Configuration();
config.setHostname(HOST_NAME);
config.setPort(PORT);
// client 存储工厂
StoreFactory storeFactory = new MemoryStoreFactory();
config.setStoreFactory(storeFactory);
// 解决对此重启服务时,netty端口被占用问题 重复使用地址
config.getSocketConfig().setReuseAddress(true);
// 支持在线人数
config.setWorkerThreads(100);
// tcpNoDelay (boolean):
// 如果设置为true,则禁用Nagle算法,这可以减少小数据包的延迟。
// 基本原理:Nagle算法试图将多个小的数据包合并成一个较大的数据包再发送出去,这样可以减少网络中的数据包数量,
// 从而提高带宽利用率。当应用发送少量数据时,TCP并不会立即将这些数据发送出去,而是等待一段时间(比如等待应用发送更多的数据),直到数据量达到一定阈值或超时后再一起发送
// tcpSendBufferSize (int):
// 设置发送缓冲区大小。如果设置为-1,则使用系统默认值。
// tcpReceiveBufferSize (int):
// 设置接收缓冲区大小。如果设置为-1,则使用系统默认值。
// tcpKeepAlive (boolean):
// 如果设置为true,则启用TCP的保活机制,可以在长时间没有数据传输后检测连接是否仍然有效。
// soLinger (int):
// 设置关闭连接前等待未发送完的数据的时间。如果是-1,则立即关闭连接而不等待。
// reuseAddress (boolean):
// 如果设置为true,则允许重用地址和端口,即使之前绑定过这个端口也行。
// acceptBackLog (int):
// 设置监听队列长度,即内核为该socket保留的已完成三次握手但尚未被accept()接受的连接的最大数目。
// ssl
// config.setKeyStorePassword("test1234");
// InputStream stream = ChatSocketIOServer.class.getResourceAsStream("/keystore.jks");
// config.setKeyStore(stream);
return config;
}
/**
* EventHandler
*/
public static class EventHandler {
private final SocketIONamespace socketIONamespace;
public EventHandler(SocketIONamespace socketIONamespace) {
this.socketIONamespace = socketIONamespace;
}
@OnConnect
public void onConnect(SocketIOClient client) {
String userName = client.get(USER_NAME);
System.out.println(StrUtil.format("用户:{} 连接成功!", userName));
}
@OnDisconnect
public void onDisconnect(SocketIOClient client) {
String userName = client.get(USER_NAME);
System.out.println(StrUtil.format("用户:{} 断开连接!", userName));
}
@OnEvent("user")
public void onEventUser(SocketIOClient client, Object data, AckRequest ackSender) {
String userName = client.get(USER_NAME);
// 返回用户昵称
ackSender.sendAckData(userName);
}
@OnEvent("message")
public void onEventMessage(SocketIOClient client, Object data, AckRequest ackSender) {
Opt.ofEmptyAble(socketIONamespace.getAllClients()).ifPresent(clients -> {
// 发送消息给所有用户
socketIONamespace.getBroadcastOperations().sendEvent("message", data);
});
}
}
@Override
public void run(String... args) throws Exception {
// token验证
socketIONamespace.addAuthTokenListener((authToken, client) -> {
Integer userId = USER_NUMBER.incrementAndGet();
// 设置用户信息
client.set(USER_ID, userId);
String userName = getUserName(userId);
client.set(USER_NAME, userName);
System.out.println(StrUtil.format("token:{},用户:{} 验证成功!", authToken, userName));
return AuthTokenResult.AuthTokenResultSuccess;
});
socketIONamespace.addListeners(eventHandler());
server.start();
}
/**
* 获取用户名称
*
* @param userId
* @return
*/
private String getUserName(Integer userId) {
Assert.notNull(userId);
return "用户" + userId;
}
}
6.3 ChatServerApplication.java
java
package cn.netty.socketio.learn;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
* ChatServerApplication
*/
@SpringBootApplication
public class ChatServerApplication {
public static void main(String[] args) {
SpringApplication.run(ChatServerApplication.class, args);
}
}
启动ChatServerApplication效果和ChatServer一样