netty-socketio和Socket.IO实现网页在线聊天功能

2024-09-05 23:28
文章标签 网页 实现 功能 聊天 在线 netty io socket socketio

本文主要是介绍netty-socketio和Socket.IO实现网页在线聊天功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 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实现

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/chatSocketIONamespace 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

<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配置

server:port: 8089spring:application:name: chat-servermain: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，而是直接 1611460870401write-durations-as-timestamps: true # 设置 Duration 的格式，使用时间戳fail-on-empty-beans: false # 允许序列化无属性的 Beandebug: false

6.2 ChatSocketIOServer.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() {// 创建 SocketIOServerserver = new SocketIOServer(buildConfig());// 创建 socketIONamespacesocketIONamespace = server.addNamespace("/chat");}@Beanpublic 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;}@OnConnectpublic void onConnect(SocketIOClient client) {String userName = client.get(USER_NAME);System.out.println(StrUtil.format("用户:{} 连接成功！", userName));}@OnDisconnectpublic 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);});}}@Overridepublic 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

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一样

这篇关于netty-socketio和Socket.IO实现网页在线聊天功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1140362。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
电力系统中的A类在线监测装置—APView400

电力系统中的A类在线监测装置—APView400

随着电力系统的日益复杂和人们对电能质量要求的提高，电能质量在线监测装置在电力系统中得到广泛应用。目前，市场上的在线监测装置主要分为A类和B类两种类型，A类和B类在线监测装置主要区别在于应用场景、技术参数、通讯协议和扩展性。选择时应根据实际需求和应用场景综合考虑，并定期维护和校准。电能质量在线监测装置是用于实时监测电力系统中的电能质量参数的设备。 APView400电能质量A类在线监测装置以其多核
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2