nodejs使用WebSocket实现聊天效果
在nodejs中使用WebSocket实现聊天效果（简易实现）
安装
npm i ws实现
创建 server.js
/*** 创建一个 WebSocket 服务器，监听指定端口，并处理客户端连接和消息。** @param {Object} WebSocket - 引入的 WebSocket 模块，用于创建 WebSocket 服务器。** 功能步骤：* 1. 创建一个 WebSocket 服务器，监听端口 1024。* 2. 维护一个消息列表 `list`，用于存储客户端发送的消息。* 3. 当客户端发送消息时，解析消息内容并将其添加到消息列表中。* 4. 将更新后的消息列表发送回客户端。*/const WebSocket = require('ws')// 消息列表，用于存储所有客户端发送的消息
let list = []// 创建 WebSocket 服务器，监听端口 1024
const wss = new WebSocket.Server({port: 1024},() => {console.log('Server is listening on port 1024')}
)// 监听客户端连接事件
wss.on('connection', function (ws) {// 监听客户端发送的消息事件ws.on('message', function (msg) {// console.log('收到客户端消息', JSON.parse(msg))try {// 解析客户端发送的消息if (msg) {// 如果消息没有错误，将消息内容添加到消息列表中list.push(JSON.parse(msg).netName + ' 说: ' + JSON.parse(msg).msg)}} catch (error) {}// 将更新后的消息列表发送回客户端ws.send(JSON.stringify(list))})
})
创建 client.js 测试
/*** 创建一个WebSocket客户端，用于连接指定的WebSocket服务器。** 参数:* - 'ws://192.168.8.183:1024': WebSocket服务器的URL地址。*/
const WebSocket = require('ws')const ws = new WebSocket('ws://192.168.8.183:1024')// 当WebSocket连接成功打开时触发
ws.on('open', function () {console.log('Client is listening on port 1024') // 打印日志，表示客户端已成功连接到服务器ws.send(JSON.stringify('Hello World')) // 向服务器发送消息
})// 当接收到服务器发送的消息时触发
ws.on('message', function (msg) {console.log('收到服务器消息', JSON.parse(msg))// ws.send(msg) // 将接收到的消息原样返回给服务器
})// 当WebSocket连接关闭时触发
ws.on('close', function () {console.log('Client close') // 打印日志，表示客户端连接已关闭
})
分别运行以上两个文件，如果互相能收到消息表示服务运行正常
创建 index.html 文件
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>WebSocket 消息发送</title><style>/* 消息输入框样式 */#text {width: 350px;height: 30px;}/* 用户名输入框样式 */#netName {width: 150px;height: 30px;}</style></head><body><!-- 消息显示区域 --><textarea id="msg" cols="80" rows="30" readonly></textarea><br /><!-- 用户名输入框 --><input id="netName" type="text" placeholder="名称" /><!-- 消息输入框 --><input id="text" type="text" placeholder="消息" /><!-- 发送按钮 --><button id="sendButton">发送</button><script>let ws = null // WebSocket 连接对象/*** 初始化 WebSocket 连接*/function initWebSocket() {if (ws) return // 避免重复连接ws = new WebSocket('ws://192.168.8.183:1024')ws.onopen = () => {console.log('WebSocket 连接已建立')}ws.onmessage = (evt) => {try {const receivedData = JSON.parse(evt.data)msg.value = Array.isArray(receivedData) ? receivedData.join('\n') : JSON.stringify(receivedData, null, 2)} catch (error) {console.error('解析接收到的数据失败:', error)}}ws.onerror = (error) => {console.error('WebSocket 错误:', error)}ws.onclose = () => {console.log('WebSocket 连接已关闭，尝试重新连接...')ws = nullsetTimeout(initWebSocket, 5000) // 5 秒后重连}setInterval(() => {ws.send('')}, 1000)}/*** 发送消息到 WebSocket 服务器* @param {Object} data - 要发送的数据对象*/function sendMessage(data) {if (!ws || ws.readyState !== WebSocket.OPEN) {console.warn('WebSocket 未打开，尝试重新连接...')initWebSocket()return}if (!data) {data = { err: 1 }} else if (typeof data !== 'object' || Array.isArray(data)) {console.error('数据格式无效')return}ws.send(JSON.stringify(data))}/*** 处理发送按钮点击或回车键事件*/function handleSend() {const netNameValue = netName.value.trim()const textValue = text.value.trim()if (!netNameValue || !textValue) {alert('用户名和消息不能为空')return}const message = {netName: netNameValue,msg: textValue}sendMessage(message)text.value = '' // 清空消息输入框}// 初始化 WebSocket 连接initWebSocket()// 绑定发送按钮点击事件document.getElementById('sendButton').addEventListener('click', handleSend)// 监听回车键事件document.addEventListener('keyup', (e) => {if (e.key === 'Enter') {handleSend()}})</script></body>
</html>
用两个浏览器打开此文件，就可以互相发送消息
静态文件服务
或者创建一个 static.js 静态服务访问 index.html
// static.jsconst express = require('express')
const app = express()
const path = require('path')app.use('/main', express.static(path.join(__dirname, 'index.html'))) // 设置静态文件夹// 端口号不能与socket监听的端口号一样
app.listen(2048, () => {console.log('static 2048 Server Start~')
})
启动服务
node static.js访问： http://127.0.0.1:2048/main
以上所有文件放在同一目录
相关文章：
nodejs使用WebSocket实现聊天效果
在nodejs中使用WebSocket实现聊天效果（简易实现） 安装 npm i ws 实现 创建 server.js /*** 创建一个 WebSocket 服务器，监听指定端口，并处理客户端连接和消息。** param {Object} WebSocket - 引入的 WebSocket 模块，…...
【仿muduo库one thread one loop式并发服务器实现】
文章目录 一、项目介绍1-1、项目总体简介1-2、项目开发环境1-3、项目核心技术1-4、项目开发流程1-5、项目如何使用 二、框架设计2-1、功能模块划分2-1-1、SERVER模块2-1-2、协议模块 2-2、项目蓝图2-2-1、整体图2-2-2、模块关系图2-2-2-1、Connection 模块关系图2-2-2-2、Accep…...
10.2 继承与多态
文章目录 继承多态 继承 继承的作用是代码复用。派生类自动获得基类的除私有成员外的一切。基类描述一般特性，派生类提供更丰富的属性和行为。在构造派生类时，其基类构造函数先被调用，然后是派生类构造函数。在析构时顺序刚好相反。 // 基类…...
Go红队开发—格式导出
文章目录 输出功能CSV输出CSV 转 结构体结构体 转 CSV端口扫描结果使用CSV格式导出 HTML输出Sqlite输出nmap扫描 JSONmap转json结构体转jsonjson写入文件json编解码json转结构体json转mapjson转string练习：nmap扫描结果导出json格式 输出功能 在我们使用安全工具的…...
线性代数之矩阵特征值与特征向量的数值求解方法
文章目录 前言1. 幂迭代法（Power Iteration）幂法与反幂法求解矩阵特征值幂法求最大特征值编程实现补充说明 2. 逆幂迭代法（Inverse Iteration）移位反幂法 3. QR 算法（QR Algorithm）——稠密矩阵理论推导编程…...
Spring MVC源码分析のinit流程
文章目录 前言一、 init1.1、createWebApplicationContext1.2、onRefresh 二、请求处理器2.1、RequestMapping2.2、Controller接口2.3、HttpRequestHandler接口2.4、HandlerFunction 三、initHandlerMappings3.1、getDefaultStrategies3.1.1、RequestMappingHandlerMapping3.1.…...
【后端开发】go-zero微服务框架实践（goland框架对比，go-zero开发实践，文件上传问题优化等等）
【后端开发】go-zero微服务框架实践（goland框架对比，go-zero开发实践，文件上传问题优化等） 文章目录 1、go框架对比介绍2、go-zero 微服务开发实践3、go-zero 文件上传问题优化 1、go框架对比介绍 国内开源goland框架对比 1 go-…...
C#程序加密与解密Demo程序示例
目录 一、加密程序功能介绍 1、加密用途 2、功能 3、程序说明 4、加密过程 5、授权的注册文件保存方式 二、加密程序使用步骤 1、步骤一 编辑2、步骤二 3、步骤三 4、步骤四 三、核心代码说明 1、获取电脑CPU 信息 2、获取硬盘卷标号 3、机器码生成 3、 生成…...
小程序事件系统 —— 33 事件传参 - data-*自定义数据
事件传参：在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参； 在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成…...
深入解析 JavaScript 原型与原型链：从原理到应用
原型和原型链是 JavaScript 中实现对象继承和属性查找的核心机制。为了更深入地理解它们，我们需要从底层原理、实现机制以及实际应用等多个角度进行分析。 1. 原型（Prototype） 1.1 什么是原型？ 每个 JavaScript 对象（…...
关于AI数据分析可行性的初步评估
一、结论：可在部分环节嵌入，无法直接处理大量数据 1.非本地部署的AI应用处理非机密文件没问题，内部文件要注意数据安全风险。 2.AI（指高规格大模型）十分适合探索性研究分析，对复杂报告无法全流程执行&…...
回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测
回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测 目录 回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测回归效果基本介绍GWO-BP-Adaboost:基于灰狼算法优化BP神经网络结合Adaboost思想…...
ARM Cortex-M 内存映射详解:如何基于寄存器直接读写 寄存器映射方式编码程序 直接操作硬件寄存器来控制 MCU
ARM Cortex-M 的系统映射空间 在 STM32 等 ARM Cortex-M 系列 MCU 中，内存地址空间按照 存储功能 进行了严格划分，包括 Flash（程序存储）、RAM（数据存储）、外设寄存器（GPIO、UART、SPI 等&am…...
深度学习实战车辆目标跟踪与计数
本文采用YOLOv8作为核心算法框架，结合PyQt5构建用户界面，使用Python3进行开发。YOLOv8以其高效的实时检测能力，在多个目标检测任务中展现出卓越性能。本研究针对车辆目标数据集进行训练和优化，该数据集包含丰富的车辆目标图像样本…...
django中视图作用和视图功能 以及用法
在 Django REST Framework（DRF）中，视图（View）是处理 HTTP 请求并返回响应的核心组件。DRF 提供了多种视图类，适用于不同的场景和需求。以下是 DRF 中常见的视图类及其作用、使用方法的详细说明： 一、DRF 视图的分类 DRF 的视图可以分为以下几类： 基于函数的视图（Func…...
【每日学点HarmonyOS Next知识】输入框自动获取焦点、JS桥实现方式、Popup设置全屏蒙版、鼠标事件适配、Web跨域
1、HarmonyOS TextInput或TextArea如何自动获取焦点？ 可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点，具体可以参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attribut…...
【学习思维模型】
学习思维模型 一、理解类模型二、记忆类模型三、解决问题类模型四、结构化学习模型五、效率与习惯类模型六、高阶思维模型七、实践建议八、新增学习思维模型**1. 波利亚问题解决四步法****2. 主动回忆（Active Recall）****3. 鱼骨图（因果图/Ishikawa Diagram）****4. MECE原则…...
MyBatis-Plus分页控件使用及使用过程发现的一个坑
最近维护一个旧项目的时候，出现了一个BUG，经排查后发现是Mybatis-plus分页控件使用的时候需要注意的一个问题，故在本地使用MybatisPlus模拟出现了一下这个问题。 首先，先说一下MyBatis-Plus的使用： 1）引入…...
STM32的APB1和APB2的区别
STM32微控制器中的APB1和APB2的区别 STM32微控制器中的APB1和APB2是两种不同的外设总线，主要区别在于时钟速度、连接的外设以及用途。以下是它们的详细对比： 1. 时钟速度 APB1 (Advanced Peripheral Bus 1): 低速总线，时钟频率通常为系统时钟…...
JS一些小知识点
一、|| 运算符 plain this.ctx.body { type: type || 0, // ||在此处用法用于默认值填充，判断是否传参或该值是否存在，如果不存在就使用||后买你的值作为默认值 code: code || 0, msg: msg || SUCCESS, data: data || {}, ...others }; 二、trim() 方…...
手写Tomcat：实现基本功能
首先，Tomcat是一个软件，所有的项目都能在Tomcat上加载运行，Tomcat最核心的就是Servlet集合，本身就是HashMap。Tomcat需要支持Servlet，所以有servlet底层的资源：HttpServlet抽象类、HttpRequest和HttpRespon…...
C#变量与变量作用域详解
一、变量基础 1. 声明与初始化 声明语法：<数据类型> <变量名>（如 int age; string name）初始化要求： 1、 类或结构体中的字段变量（全局变量）无需显式初始化，默认值…...
SV学习笔记——数组、队列
一、定宽数组 定宽数组是静态变量，编译时便已经确定其大小，其可以分为压缩定宽数组和非压缩定宽数组:压缩数组是定义在类型后面，名字前面;非压缩数组定义在名字后面。Bit [7:0][3:0] name; bit[7:0] name [3:0]; 1.1定宽数组声明 数组的声…...
API调试工具的无解困境：白名单、动态IP与平台设计问题
引言 你是否曾经在开发中遇到过这样的尴尬情形：你打开了平台的API调试工具，准备一番操作，结果却发现根本无法连接到平台？别急，问题出在调试工具本身。今天我们要吐槽的就是那些神奇的开放平台API调试工具，…...
Git清理本地残留的、但已经在服务器上被删除的分支
要筛选出已经被服务器删除的本地分支，并在本地删除这些分支，可以按照以下步骤进行操作： 步骤 1: 获取远程分支信息，确保本地的远程分支信息是最新的： git fetch -p步骤 2: 列出本地分支和远程分支： git …...
HTTPS实现内容加密的逻辑
加密过程 使用非对称加密，网站生成公钥和私钥浏览器获取到网站公钥（通过验证和解析CA证书），随即生成一串字符串，然后使用公钥加密，发送给网站。网站用私钥将加密内容解析，然后使用这串字符串对…...
使用vue3.0+electron搭建桌面应用并打包exe
使用vue3.0electron搭建桌面应用并打包exe_如何使用electron将vue3vite开发完的项目打包成exe应用程序-CSDN博客...
JSAR 基础 1.2.1 基础概念_空间小程序
JSAR 基础 1.2.1 基础概念_空间小程序 空间空间自由度可嵌入空间空间小程序 最新的技术进展表明，官网之前的文档准备废除了，基于xsml的开发将退出历史舞台，three.js和普通web结合的技术将成为主导。所以后续学习请移步three.js学习路径&#…...
mysql练习
创建数据库db_ck，再创建表t_hero，将四大名著中的主要人物都插入这个表中，将实现过程中sql提交上上来 1、创建数据库db_ck mysql> create database db_ck; 2、创建表t_hero mysql> use db_ck Database changed mysql> create table …...
2025年2月平价旗舰手机性能对比
1、荣耀Magic7 点评：缺席潜望式长焦，3X直立长焦体验还行。兼顾性能、游戏、屏幕、影像、续航、快充等诸多方面，且外围配置比较齐全。 2、vivo x200 点评：潜望式长焦相机，拍照效果好，30W无线充电着实鸡肋&a…...