编写一个基于React的聊天室
前言
此前已经编写了一版后端的im,此次就用其作为服务端,可查看参考资料1
代码
使用WebStorm创建React项目

安装依赖包
PS C:\learn-demo\front\chatroom> npm installadded 183 packages, and audited 184 packages in 16s43 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities
创建ChatRoom.tsx
import React, { useState, ChangeEvent } from 'react';const ChatRoom: React.FC = () => {const [message, setMessage] = useState('');const [messages, setMessages] = useState<string[]>([]);const [socket, setSocket] = useState<WebSocket | null>(null);const [userName, setUserName] = useState('');const handleSendMessage = () => {if (socket && message) {socket.send(message);setMessage('');}};const handleConnected = () => {if (userName) {setUserName(userName);createWebSocket(userName);}};const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {setMessage(event.target.value);};const handleInputName = (event: ChangeEvent<HTMLInputElement>) => {setUserName(event.target.value);};const createWebSocket = (userName: string) => {setMessages(prevMessages => [...prevMessages, `welcome 【${userName}】`])if (userName){setUserName(userName);}else {return;}//关闭已有websocket连接if (socket){socket.close()}const newSocket = new WebSocket(`ws://localhost:18080/ws?userName=${userName}`);newSocket.onopen = () => {console.log('Connected to the WebSocket server');};newSocket.onmessage = (event: MessageEvent) => {setMessages(prevMessages => [...prevMessages, event.data]);};newSocket.onclose = () => {console.log('Disconnected from the WebSocket server');};setSocket(newSocket);}return (<div><ul>{messages.map((msg, index) => (<li key={index}>{msg}</li>))}</ul><inputtype="text"value={userName}onChange={handleInputName}/><button onClick={handleConnected}>Connected</button><br/><inputtype="text"value={message}onChange={handleInputChange}/><button onClick={handleSendMessage}>Send</button></div>);
};export default ChatRoom;
修改main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import ChatRoom from "./component/ChatRoom.tsx";createRoot(document.getElementById('root')!).render(<StrictMode><ChatRoom /></StrictMode>,
)
测试
- 运行项目,打开三个http://localhost:5173/的页面
分别以不同用户名(test1、test2、test3)连接websocket,步骤是第一行输入框输入用户名,然后点击Connected按钮

- test1发送全体消息
第二行输入框输入消息,点击Send按钮

test2、test3均收到消息


- test1发送消息给test2

test2收到消息

test3未收到消息

调整后端代码
上述消息分不清到底是谁发给用户的,调整下im服务的代码
SendExecutorFactory
public void onMessage(String sendUserName, String message) {IBaseSendExecutor iBaseSendExecutor = Optional.ofNullable(executorConfiguration.getBaseSendExecutorMap().get(webSocketProperties.getCommunicationType())).orElse(new DefaultSendExecutor());message = String.format("【%s】: %s", sendUserName, message);//包含@发给指定人,否则发给全部人if (StringUtils.contains(message, webSocketProperties.getReceiverSeparator())) {iBaseSendExecutor.sendToUser(sendUserName, message);} else {iBaseSendExecutor.sendToAll(sendUserName, message);}
}
重新启动服务端,发送消息
页面上重新连接,test1发送全体消息

test2、test3均收到test1的消息


参考资料
[1].im后端代码
[2].chatroom前端项目
相关文章:
编写一个基于React的聊天室
前言 此前已经编写了一版后端的im,此次就用其作为服务端,可查看参考资料1 代码 使用WebStorm创建React项目 安装依赖包 PS C:\learn-demo\front\chatroom> npm installadded 183 packages, and audited 184 packages in 16s43 packages are looki…...
[前端]NodeJS常见面试题目
什么是非阻塞 I/O? Node.js 如何实现非阻塞 I/O? 非阻塞 I/O 是一种编程模式,它允许 I/O 操作(如读取文件、网络请求等)在执行时不阻塞程序的其余部分。换句话说,当一个 I/O 操作发起后,程序可以立即继续执行其他任…...
【实测可用】Sublime Text4 4180 windows 已测可用
------------------测试时间2024年11月7日------------------- 打开浏览器进入网站: 点击进入修改网站打开sublime text4安装目录选择文件sublime_text.exe搜索80 79 05 00 0f 94 c2更改为c6 41 05 01 b2 00 90(第一个匹配到的)保存文件命名为sublime_text.exe并…...
JAVA日期加减运算 JsonObject 转换对象List
1.用java.util.Calender来实现 Calendar calendarCalendar.getInstance(); calendar.setTime(new Date());System.out.println(calendar.get(Calendar.DAY_OF_MONTH));//今天的日期calendar.set(Calendar.DAY_OF_MONTH,calendar.get(Calendar.DAY_OF_MONTH)1);//让日期加1 Sy…...
在 PostgreSQL 中,重建索引可以通过 `REINDEX` 命令来完成
在 PostgreSQL 中,重建索引 在 PostgreSQL 中,重建索引可以通过 REINDEX 命令来完成。 重建索引的主要目的是提高查询性能,尤其是在数据频繁更新的情况下。以下是重建索引的基本语法和示例: 基本语法 REINDEX INDEX index_name…...
SQL相关常见的面试题
SQL(Structured Query Language)是数据库管理中不可或缺的一部分,因此在技术面试中经常会被问到与 SQL 相关的问题。以下是一些常见的 SQL 面试题及其答案。 基础概念 什么是 SQL? SQL 是一种用于管理和处理关系型数据库的标准语…...
Vue数据响应式原理
前言 Vue是一个结构的框架,也就是 数据层、视图层、数据-视图层;响应式的原理就是实现当数据更新时,视图层也要相应的更新 响应式实现 基于发布订阅模式和数据劫持实现 1.发布订阅模式:vue使用发布订阅模式来实现数据变动的通知和更新 2…...
Electron + Vue3 开发桌面应用+附源码
什么是 Electron? Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护,允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境,使得开发…...
Webserver(5.2)网页服务器框架
目录 网页服务器服务器编程基本框架两种高效的事件处理模式reactor模式proactor模式同步IO模拟Proactor模式 网页服务器 接收、存储,处理来自客户端的HTTP请求,并对其请求做出HTTP响应。 Web服务器底层是基于tcp协议的,因为要保证数据安全。…...
股指期货交易中,如何应对震荡行情?
在股指期货交易中,趋势和震荡是市场波动的两种基本形态。然而,对于许多交易者来说,如何在趋势交易中有效应对震荡行情,却是一个令人头疼的问题。本文将结合相关链接内容,为您详细解读期货交易中如何应对震荡行情。 一…...
理想汽车Android面试题及参考答案
请解释一下 Android 中的 Handler 是如何工作的 在 Android 中,Handler 主要用于在不同线程之间进行通信,特别是在主线程(UI 线程)和工作线程之间。 Handler 是基于消息队列(MessageQueue)和 Looper 来工作…...
【数据集】【YOLO】【目标检测】口罩佩戴识别数据集 1971 张,YOLO佩戴口罩检测算法实战训练教程!
数据集介绍 【数据集】口罩佩戴检测数据集 1971 张,目标检测,包含YOLO/VOC格式标注。 数据集中包含1种分类:{0: face_mask},佩戴口罩。 数据集来自国内外图片网站和视频截图。 检测场景为城市街道、医院、商场、机场、车站、办…...
前端将后端返回的文件下载到本地
vue 将后端返回的文件地址下载到本地 在 template 拿到后端返回的文件路径 <el-button link type"success" icon"Download" click"handleDownload(file)"> 附件下载 </el-button>在 script 里面写方法 function handleDownload(v…...
GISBox VS ArcGIS:分别适用于大型和小型项目的两款GIS软件
在现代地理信息系统(GIS)领域,有许多大家耳熟能详的GIS软件。它们各自具有独特的优势,适用于不同的行业需求和使用场景。在众多企业和开发者面前,如何选择合适的 GIS 软件成为了一个值得深入思考的问题。今天ÿ…...
掌握分布式系统的38个核心概念
天天说分布式分布式,那么我们是否知道什么是分布式,分布式会遇到什么问题,有哪些理论支撑,有哪些经典的应对方案,业界是如何设计并保证分布式系统的高可用呢? 1. 架构设计 这一节将从一些经典的开源系统架…...
如何使用 VNC 服务器连接桌面
如何使用VNC软件去连接远程桌面系统呢? 一、什么是VNC? VNC(Virtual Network Computing,虚拟网络计算)是一种远程桌面共享协议,允许用户通过网络访问和控制远程计算机的桌面界面。VNC 使用的是一种基于图像的方式,将远程计算机的桌面环境发送到客户端的显示设备上,同时…...
算法每日练 -- 双指针篇(持续更新中)
介绍: 常见的双指针有两种形式,一种是对撞指针(左右指针),一种是快慢指针(前后指针)。需要注意这里的双指针不是 int* 之类的类型指针,而是使用数组下标模拟地址来进行遍历的方式。 …...
读取excel并且显示进度条
读取excel并且显示进度条 通过C#实现DataGridView加载EXCEL文件,但加载时不能阻塞UI刷新线程,且向UI显示加载进度条。 #region 左上角导入 private async void ToolStripMenuItem_ClickAsync(object sender, EventArgs e) { …...
MySQL多表查询习题
数据内容介绍 数据库中有两个表 内容如下: 习题 列出所有员工的姓名及其直接上级的姓名。列出受雇日期早于直接上级的所有员工的编号、姓名、部门名称。列出部门名称和这些部门的员工信息,同时列出那些没有员工的部门。列出在财务部工作的员…...
HTML静态网页成品作业(HTML+CSS)——阜阳剪纸介绍设计制作(1个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…...
Python实战:利用SymPy与SciPy高效破解复杂非线性方程组
1. 为什么需要SymPy和SciPy解非线性方程组? 遇到工程计算或科研问题时,我们常需要解像这样的方程组:xy10且yz34。这种包含平方项、三角函数或指数函数的方程,传统手工计算不仅耗时还容易出错。我去年做机器人运动学分析时…...
DAMO-YOLO智能视觉系统作品集:多场景零售货架检测效果惊艳展示
DAMO-YOLO智能视觉系统作品集:多场景零售货架检测效果惊艳展示 1. 零售视觉检测的新标杆 走进现代零售空间,商品陈列的艺术背后隐藏着复杂的运营挑战。传统的人工巡检方式已经难以满足快节奏零售环境的需求,这正是DAMO-YOLO智能视觉系统大放…...
AI编程助手Trae使用详解
Trae是字节跳动推出的AI原生集成开发环境,支持macOS和Windows双平台,内置Claude-3.5、GPT-4o、DeepSeek等顶级AI模型,具备代码补全、智能问答等核心功能。相比传统编辑器,Trae的最大特点是深度集成了AI协作能力,可以实…...
一站式融合赋能,企业级私有化视频会议系统EasyDSS助力企业培训全流程闭环管理
传统企业培训往往面临诸多痛点,线下培训受地域、时间限制,直播培训错过即无,核心内容无法有效沉淀,会议、直播、点播多平台切换,操作繁琐效率低,EasyDSS企业级私有化视频会议系统,打破单一功能局…...
BACnet4j实战:从模拟设备到点位数据采集的完整流程解析
1. BACnet4j与工业物联网数据采集入门 第一次接触BACnet协议时,我被各种专业术语搞得晕头转向。直到用BACnet4j成功读取到第一个温度传感器的数据,才真正理解这个协议的价值。BACnet/IP就像工业设备间的普通话,而BACnet4j就是让Java程序能说这…...
静息态fMRI分析避坑指南:DPARSFA预处理中那些容易踩的‘雷’(附解决方案)
静息态fMRI分析实战避坑手册:DPARSFA预处理中的7个致命陷阱与修复方案 当你熬夜跑完DPARSFA预处理流程,满心期待地点开结果图时——突然发现ReHo图像像被泼了墨水,fALFF数值全部溢出,或是软件弹出一串看不懂的报错代码。这种崩溃…...
如何通过自动化硬件适配技术突破Hackintosh配置瓶颈:OpCore Simplify技术深度解析
如何通过自动化硬件适配技术突破Hackintosh配置瓶颈:OpCore Simplify技术深度解析 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 在开源系…...
从PolarCTF一道Crypto题,聊聊如何用SageMath秒解自定义群运算的离散对数问题
从PolarCTF一道Crypto题看SageMath在离散对数问题中的实战应用 1. 密码学竞赛中的非标准群运算挑战 在CTF密码学题目中,自定义群运算的离散对数问题(DLP)是常见的高频考点。近期PolarCTF竞赛中出现了一道典型题目,要求参赛者在非…...
从旅游Vlog到新闻视频:QVHIGHLIGHTS数据集在跨领域应用中的实战指南
QVHIGHLIGHTS数据集:跨领域视频内容智能解析的工程实践 当你在旅行Vlog中搜索"日落时分的海滩漫步",或在新闻视频中寻找"抗议活动现场冲突画面",传统视频平台只能返回整段视频——这就像给你一整本书而不是精确的页码。Q…...
AgentCPM-Report研报系统实操:Pixel Epic贤者响应延迟优化教程
AgentCPM-Report研报系统实操:Pixel Epic贤者响应延迟优化教程 1. 认识Pixel Epic智识终端 Pixel Epic是一款基于AgentCPM-Report大模型构建的创新研究报告辅助系统。与传统AI工具不同,它将枯燥的科研过程转化为一场像素风格的RPG冒险。在这个系统中&a…...
