当前位置： 首页 > news >正文

nodejs使用WebSocket实现聊天效果

news 2025/11/6 0:18:50

在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实现聊天效果&#xff08;简易实现&#xff09; 安装 npm i ws 实现 创建 server.js /*** 创建一个 WebSocket 服务器&#xff0c;监听指定端口&#xff0c;并处理客户端连接和消息。** param {Object} WebSocket - 引入的 WebSocket 模块&#xff0c…...

编程日记 2025/3/10 19:16:32

【仿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…...

编程日记 2025/3/10 19:13:27

10.2 继承与多态

文章目录 继承多态 继承 继承的作用是代码复用。派生类自动获得基类的除私有成员外的一切。基类描述一般特性&#xff0c;派生类提供更丰富的属性和行为。在构造派生类时&#xff0c;其基类构造函数先被调用&#xff0c;然后是派生类构造函数。在析构时顺序刚好相反。 // 基类…...

编程日记 2025/3/10 19:12:26

Go红队开发—格式导出

文章目录 输出功能CSV输出CSV 转 结构体结构体 转 CSV端口扫描结果使用CSV格式导出 HTML输出Sqlite输出nmap扫描 JSONmap转json结构体转jsonjson写入文件json编解码json转结构体json转mapjson转string练习&#xff1a;nmap扫描结果导出json格式 输出功能 在我们使用安全工具的…...

编程日记 2025/3/10 19:06:18

线性代数之矩阵特征值与特征向量的数值求解方法

文章目录 前言1. 幂迭代法&#xff08;Power Iteration&#xff09;幂法与反幂法求解矩阵特征值幂法求最大特征值编程实现补充说明 2. 逆幂迭代法&#xff08;Inverse Iteration&#xff09;移位反幂法 3. QR 算法&#xff08;QR Algorithm&#xff09;——稠密矩阵理论推导编程…...

编程日记 2025/3/10 19:04:15

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.…...

编程日记 2025/3/10 18:57:06

【后端开发】go-zero微服务框架实践（goland框架对比，go-zero开发实践，文件上传问题优化等等）

【后端开发】go-zero微服务框架实践&#xff08;goland框架对比&#xff0c;go-zero开发实践&#xff0c;文件上传问题优化等&#xff09; 文章目录 1、go框架对比介绍2、go-zero 微服务开发实践3、go-zero 文件上传问题优化 1、go框架对比介绍 国内开源goland框架对比 1 go-…...

编程日记 2025/3/10 18:50:55

C#程序加密与解密Demo程序示例

目录 一、加密程序功能介绍 1、加密用途 2、功能 3、程序说明 4、加密过程 5、授权的注册文件保存方式 二、加密程序使用步骤 1、步骤一 ​编辑2、步骤二 3、步骤三 4、步骤四 三、核心代码说明 1、获取电脑CPU 信息 2、获取硬盘卷标号 3、机器码生成 3、 生成…...

编程日记 2025/3/10 18:47:51

小程序事件系统 —— 33 事件传参 - data-*自定义数据

事件传参&#xff1a;在触发事件时&#xff0c;将一些数据作为参数传递给事件处理函数的过程&#xff0c;就是事件传参&#xff1b; 在微信小程序中&#xff0c;我们经常会在组件上添加一些自定义数据&#xff0c;然后在事件处理函数中获取这些自定义数据&#xff0c;从而完成…...

编程日记 2025/3/10 18:37:37

深入解析 JavaScript 原型与原型链：从原理到应用

原型和原型链是 JavaScript 中实现对象继承和属性查找的核心机制。为了更深入地理解它们&#xff0c;我们需要从底层原理、实现机制以及实际应用等多个角度进行分析。 1. 原型&#xff08;Prototype&#xff09; 1.1 什么是原型&#xff1f; 每个 JavaScript 对象&#xff08…...

编程日记 2025/3/10 18:36:35

关于AI数据分析可行性的初步评估

一、结论&#xff1a;可在部分环节嵌入&#xff0c;无法直接处理大量数据 1.非本地部署的AI应用处理非机密文件没问题&#xff0c;内部文件要注意数据安全风险。 2.AI&#xff08;指高规格大模型&#xff09;十分适合探索性研究分析&#xff0c;对复杂报告无法全流程执行&…...

编程日记 2025/3/10 18:32:30

回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测

回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测 目录 回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测回归效果基本介绍GWO-BP-Adaboost:基于灰狼算法优化BP神经网络结合Adaboost思想…...

编程日记 2025/3/10 18:30:26

ARM Cortex-M 内存映射详解:如何基于寄存器直接读写 寄存器映射方式编码程序 直接操作硬件寄存器来控制 MCU

ARM Cortex-M 的系统映射空间 ​ 在 STM32 等 ARM Cortex-M 系列 MCU 中&#xff0c;内存地址空间按照 存储功能 进行了严格划分&#xff0c;包括 Flash&#xff08;程序存储&#xff09;、RAM&#xff08;数据存储&#xff09;、外设寄存器&#xff08;GPIO、UART、SPI 等&am…...

编程日记 2025/3/10 18:28:21

深度学习实战车辆目标跟踪与计数

本文采用YOLOv8作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv8以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对车辆目标数据集进行训练和优化&#xff0c;该数据集包含丰富的车辆目标图像样本…...

编程日记 2025/3/10 18:27:18

django中视图作用和视图功能 以及用法

在 Django REST Framework（DRF）中，视图（View）是处理 HTTP 请求并返回响应的核心组件。DRF 提供了多种视图类，适用于不同的场景和需求。以下是 DRF 中常见的视图类及其作用、使用方法的详细说明： 一、DRF 视图的分类 DRF 的视图可以分为以下几类： 基于函数的视图（Func…...

编程日记 2025/3/10 18:24:14

【每日学点HarmonyOS Next知识】输入框自动获取焦点、JS桥实现方式、Popup设置全屏蒙版、鼠标事件适配、Web跨域

1、HarmonyOS TextInput或TextArea如何自动获取焦点&#xff1f; 可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点&#xff0c;具体可以参考文档&#xff1a; https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attribut…...

编程日记 2025/3/10 18:21:11

【学习思维模型】

学习思维模型 一、理解类模型二、记忆类模型三、解决问题类模型四、结构化学习模型五、效率与习惯类模型六、高阶思维模型七、实践建议八、新增学习思维模型**1. 波利亚问题解决四步法****2. 主动回忆（Active Recall）****3. 鱼骨图（因果图/Ishikawa Diagram）****4. MECE原则…...

编程日记 2025/3/10 18:20:09

MyBatis-Plus分页控件使用及使用过程发现的一个坑

最近维护一个旧项目的时候&#xff0c;出现了一个BUG&#xff0c;经排查后发现是Mybatis-plus分页控件使用的时候需要注意的一个问题&#xff0c;故在本地使用MybatisPlus模拟出现了一下这个问题。 首先&#xff0c;先说一下MyBatis-Plus的使用&#xff1a; 1&#xff09;引入…...

编程日记 2025/3/10 18:19:07

STM32的APB1和APB2的区别

STM32微控制器中的APB1和APB2的区别 STM32微控制器中的APB1和APB2是两种不同的外设总线&#xff0c;主要区别在于时钟速度、连接的外设以及用途。以下是它们的详细对比&#xff1a; 1. 时钟速度 APB1 (Advanced Peripheral Bus 1): 低速总线&#xff0c;时钟频率通常为系统时钟…...

编程日记 2025/3/10 18:16:03

JS一些小知识点

一、|| 运算符 plain this.ctx.body { type: type || 0, // ||在此处用法用于默认值填充&#xff0c;判断是否传参或该值是否存在&#xff0c;如果不存在就使用||后买你的值作为默认值 code: code || 0, msg: msg || SUCCESS, data: data || {}, ...others }; 二、trim() 方…...

编程日记 2025/3/10 18:08:52

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/11/4 16:08:05

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/10/30 22:14:03

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/10/30 1:32:29

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/11/3 21:36:14

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/10/26 17:23:14

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2025/10/11 1:22:30