编写一个基于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前端项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Javascript事件循环流程分析

基础概念 事件循环&#xff08;Event Loop&#xff09;&#xff1a;事件循环是JavaScript运行时环境中的一个循环机制&#xff0c;它不断地检查调栈用和任务队列。当调用栈为空时&#xff0c;事件循环会首先检查微任务队列&#xff0c;并执行其中的所有任务。只有当微任务队列…

解决使用Golang的email库发送qq邮件报错short response,错误类型为textproto.ProtocolError

问题阐述 使用email库发送QQ邮件&#xff0c;采用587端口&#xff1a; package mainimport ("fmt""net/smtp""github.com/jordan-wright/email" )func SendEmail(sendTo string, subject string, body string) (err error) {e : email.NewEmai…

ENAS和DARTs的比较

ENAS&#xff08;Efficient Neural Architecture Search&#xff09;和DARTS&#xff08;Differentiable Architecture Search&#xff09;都是神经架构搜索&#xff08;NAS&#xff09;的有效方法&#xff0c;目标是自动化地找到高性能的神经网络结构。尽管它们都旨在解决NAS的…

题目:Wangzyy的卡牌游戏

登录 - XYOJ 思路&#xff1a; 使用动态规划&#xff0c;设dp[n]表示当前数字之和模三等于0的组合数。 状态转移方程&#xff1a;因为是模三&#xff0c;所以和的可能就只有0、1、2。等号右边的f和dp都表示当前一轮模三等于k的组合数。以第一行为例&#xff1a;等号右边表示 j转…

mysql数据库命令备份和同步

使用mysqldump备份192.168.1.198服务上的test_db数据库 mysqldump --column--statistics0 --set-gtid-purgedOFF -uroot -h 192.168.1.198 -p123456 test_db > /use/local/sql_bak/test_db.sql** 使用mysql再192.168.1.199服务上执行数据库备份文件 ** mysql -h 192.168…

ARM64的Mac Node.js前置工作,nvm在线安装

1&#xff0c;通过 终端 ping raw.githubusercontent.com 获取到ip地址185.199.110.133 2&#xff0c;终端输入sudo vi /etc/hosts&#xff0c;打开hosts文件 3&#xff0c;在最后添加 185.199.110.133 raw.githubusercontent.com 保存后退出 3.1&#xff0c;清除环境 完全…

【支付行业-支付系统架构及总结】

记得第一次看埃隆马斯克&#xff08;Elon Musk&#xff09;讲第一性原理的视频时&#xff0c;深受震撼&#xff0c;原来还可以这样处理复杂的事务。这篇文章也尝试化繁为简&#xff0c;探寻支付系统的本质&#xff0c;讲清楚在线支付系统最核心的一些概念和设计理念。 虽然支付…

模块化沙箱:深信达如何为数据安全提供全方位保护

在数字化时代&#xff0c;网络安全已经成为企业和个人不可忽视的重要议题。随着网络攻击手段的日益复杂和多样化&#xff0c;传统的安全防护措施已经难以应对日益严峻的安全挑战。在这样的背景下&#xff0c;模块化沙箱技术应运而生&#xff0c;成为网络安全领域的新宠。今天&a…

基于单片机的观赏类水草养殖智能控制系统的设计(论文+源码)

1总体设计 通过需求分析&#xff0c;本设计观赏类水草养殖智能控制系统的总体架构如图2.1所示&#xff0c;为系统总体设计框图。系统采用STM32单片机作为系统主控核心&#xff0c;利用DS18B20温度传感器、TDS传感器、CO2传感器、光敏传感器实现水草养殖环境中水温、CO2浓度、T…

基于Jeecgboot3.6.3vue3的flowable流程增加online表单的审批支持(四)online表单字段控制

更多技术支持与服务请加入我的知识星球或加我微信,名称:亿事达nbcio技术交流社区https://t.zsxq.com/iPi8F 1、首先需要配置操作规则,如下: 配置这个节点的一些字段属性,上面就是有两个隐藏了,一个可以编辑,上面的规则采用json格式保存到数据库里 2、取出这些规则 //根…

分享:文本转换工具:PDF转图片,WORD转PDF,WORD转图片

前言 鉴于网上大多数在线转换工具要么需要收费&#xff0c;要么免费后但转换质量极差的情况&#xff0c;本人开发并提供了PDF转图片&#xff0c;WORD转PDF&#xff0c;WORD转图片等的文本转换工具。 地址 http://8.134.236.93/entry/login 账号 账号&#xff1a;STAR001&a…

星环大数据平台--TDH部署

1.1 准备一台虚拟机 正常安装一台新的虚拟机&#xff0c; 内存16G&#xff0c;cpu8核&#xff0c;硬盘50G 1.2 安装前系统配置改动 修改/etc/hosts文件&#xff0c;确保hostname该文件包含节点的hostname和IP地址的映射关系列表。 hostname由数字、小写字母或“-”组成&am…

Visual Studio2022版本的下载与安装

1-首先打开微软的官网&#xff0c;下面就是链接 下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux免费下载 Visual Studio IDE 或 VS Code。 在 Windows、Mac 上试用 Visual Studio Professional 或企业版。https://visualstudio.microsoft.com/zh-hans/downloads/?…

如何去除图片水印?快来试试这4种图片去水印方法!

去除图片水印是一项普遍存在的图像处理需求&#xff0c;它旨在消除水印对图片视觉效果的干扰&#xff0c;让我们能够更自由、更美观、更专业地使用图片资源。接下来&#xff0c;我们将介绍四种有效的去除图片水印的方法和工具&#xff0c;它们各自具有独特的优势和适用场景。 方…

A day a tweet(sixteen)——The better way of search of ChatGPT

Introducing ChatGPT search a/ad.及时的/及时地 ChatGPT can now search the web in a much better way than before so you get fast, timely a.有关的(relative n.亲戚,亲属;同类事物 a.比较的&#xff1b;相对的) answers with link…

selenium+chromedriver下载与安装

安装selenium 使用pip安装selenium&#xff1a; pip install selenium安装成功&#xff1a; 安装WebDriver 根据你使用的浏览器下载相应的 WebDriver。 Chrome&#xff1a;下载地址Firefox&#xff1a;下载地址Edge&#xff1a;下载地址Safari&#xff1a;下载地址 1、c…

网站模版PageAdmin网站建设模版

网站模版是搭建网站的基础&#xff0c;在当今数字化发达的年代&#xff0c;网站是各大单位在互联网上的门牌和桥梁。一个成功的官网不仅仅能够提升企业形象&#xff0c;还能将浏览用户转化为目标客户。为了达到这个网站的展示目的&#xff0c;那么选择网站模版就尤为重要。今天…

跨子网的WinCC客户机/服务器如何实现通讯?

为了更有效地利用有限的IP地址&#xff0c;为了减少广播对网络带宽的占用从而提高带宽&#xff0c;为了实现在不同子网中应用不同的安全策略从而提高网络安全性&#xff0c;现场通常要求划分子网&#xff0c;将安全等级要求不同的计算机安置在不同的子网中&#xff0c;分开管理…

openresty入门教程:ngx.print ngx.say ngx.log

在OpenResty&#xff08;一个结合了Nginx和Lua的高性能Web平台&#xff09;中&#xff0c;ngx.print、ngx.log和ngx.say是处理输出、日志记录和响应发送的常用函数。以下是这些函数的详细教程和使用方法&#xff1a; 1. ngx.print ngx.print用于向客户端发送响应内容。它可以…

Docker部署Oracle 11g

1&#xff0c;拉取镜像&#xff1a; sudo docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11gsudo docker images 2&#xff0c;启动一个临时容器&#xff0c;用于拷贝数据库文件&#xff0c;挂载到宿主主机&#xff0c;使数据持久化&#xff1a; sudo docke…