编写一个基于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…

题目:Wangzyy的卡牌游戏

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

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

记得第一次看埃隆马斯克&#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…

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

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

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…

中安OCR电子行驶证、驾驶证识别,助力便捷出行与智慧交通

随着数字化技术在各行各业的深入应用&#xff0c;交通管理领域也迈入了新的时代。OCR电子行驶证和电子驾驶证的推出&#xff0c;不仅提升了车辆及驾驶证件管理的效率&#xff0c;更大大方便了车主出行。电子证件的普及&#xff0c;使得交通管理从“实体化”逐渐走向“数字化”&…

[CKS] K8S ServiceAccount Set Up

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于Rolebinding的题目。 Question 1 The buffy Pod in the sunnydale namespace has a buffy-sa ServiceAccount with permissions the Pod doesn’t need. Modify the attached Role so that it onl…

如何找到系统中bert-base-uncased默认安装位置

问题&#xff1a; 服务器中无法连接huggingface&#xff0c;故需要自己将模型文件上传 ubuntu 可以按照这个链接下载 Bert下载和使用&#xff08;以bert-base-uncased为例&#xff09; - 会自愈的哈士奇 - 博客园 里面提供了giehub里面的链接 GitHub - google-research/be…

.NET 黑名单上传 突破WAF防护的SoapShell (免杀版)

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

vue项目删除无用的依赖

1.安装依赖检查工具 npm i depcheck2.查看无用的依赖 depcheck3.手动删除pageage.json中的无用的依赖&#xff08;如果有sass和sass-loader不要删&#xff0c;会引起项目报错&#xff09; 4.全部删除完成之后&#xff0c;删除package-lock.json文件&#xff0c;删除node_mod…