基于WebSocket的在线文字聊天室
与Ajax不同，WebSocket可以使服务端主动向客户发送响应，本案例就是基于WebSocket的一个在线聊天室，不过功能比较简单，只能满足文字交流。演示如下。
案例学习于b站up主，链接 。这位up主讲的非常清楚，值得去学习。本文属于记录自我学习过程的文章。
项目目录下app.js
//导入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000//创建一个server
const server = ws.createServer(connect => {console.log('有用户连接上来了')
})server.listen(PORT,() => {console.log('websocket服务启动成功了，监听了端口'+PORT)
})项目目录下打开终端
npm install nodejs-websocket
下载成功后。
项目目录下index.html
去掉css。
app.js
//导入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000//连接的数量
let count = 0
//创建一个server
const server = ws.createServer(connect => {console.log('新的连接')count++connect.userName = `用户${count}`broadcast(`${connect.userName}进入了聊天室`)//接收connect.on('text',data => {broadcast(data)})//关闭connect.on('close',data => {console.log('关闭连接')count--broadcast(`${connect.userName}离开了聊天室`)})//异常connect.on('error',data => {console.log('发生异常')})
})//广播
function broadcast(msg) {server.connections.forEach(item => {item.send(msg)})
}server.listen(PORT,() => {console.log('websocket服务启动成功了，监听了端口'+PORT)
})index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body><div></div><input type="text" placeholder="请输入你的内容"/><button>发送</button><script>var input = document.querySelector('input')var button = document.querySelector('button')var div = document.querySelector('div')//websocket的服务地址var socket = new WebSocket('ws://localhost:3000')//连接成功时socket.addEventListener('open',function() {div.innerHTML = '连接服务成功了'})//主动向服务器发消息button.addEventListener('click',function() {var value = input.valuesocket.send(value)})//接受数据socket.addEventListener('message',function(e) {console.log(e.data)var dv = document.createElement('div')dv.innerText = e.datadiv.appendChild(dv)})//断开连接socket.addEventListener('close',function(e) {div.innerHTML = '服务断开连接'})</script></body>
</html>浏览框1
浏览框2
稍微美化页面，增强一下逻辑。在浏览器内打开三个窗口，既有3个人参与到聊天室中，现在可以聊天了。
用户1
用户2
用户3
主要代码
请先安装node.js并已下载websocket的环境。
项目目录：
app.js
//导入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2//连接的数量
let count = 0
//创建一个server
const server = ws.createServer(connect => {console.log('新的连接')count++connect.userName = `用户${count}`broadcast({type: TYPE_ENTER,msg: `${connect.userName}进入了聊天室`,time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')})//接收connect.on('text',data => {broadcast({type: TYPE_MSG,msg: connect.userName + ':' + data,time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')})})//关闭connect.on('close',data => {console.log('关闭连接')count--broadcast({type: TYPE_LEAVE,msg: `${connect.userName}离开了聊天室`,time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')})})//异常connect.on('error',data => {console.log('发生异常')})
})//广播
function broadcast(msg) {server.connections.forEach(item => {item.send(JSON.stringify(msg))})
}server.listen(PORT,() => {console.log('websocket服务启动成功了，监听了端口'+PORT)
})index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {padding: 0;margin: 0;}body {background: #eff0fe;font-family: '宋体';}#box {padding: 20px;}input {width: 600px;height: 30px;border: none;outline: none;color: gray;}#chat {padding: 10px;background: white;width: 920px;box-sizing: border-box;height: 95vh;}#operation {position: fixed;top: 300px;right: 20px;}#title {font-size: 200px;position: fixed;top: 20px;right: 80px;color: gray;opacity: 0.3;font-family: '黑体';}button {height: 30px;width: 50px;text-align: center;line-height: 30px;border: none;color: gray;}button:hover {cursor: pointer;}.middle {width: 200px;margin: 0 auto;font-size: 3px;color: gray;margin-bottom: 5px;}.msg {width: 900px;word-break: break-all;}</style></head><body><div id="box"><div id="chat"></div><div id="title">聊天室</div><div id="operation"><input type="text" placeholder="请输入你的内容"/><button>发送</button></div></div><script>const TYPE_ENTER = 0const TYPE_LEAVE = 1const TYPE_MSG = 2var input = document.querySelector('input')var button = document.querySelector('button')var div = document.querySelector('#chat')console.log(input)//websocket的服务地址var socket = new WebSocket('ws://localhost:3000')//连接成功时socket.addEventListener('open',function() {div.innerHTML = '欢迎来到聊天室'})//主动向服务器发消息button.addEventListener('click',function() {var value = input.valuesocket.send(value)input.value = ''})//接受数据socket.addEventListener('message',function(e) {console.log(e.data)var data = JSON.parse(e.data)if(data.type === TYPE_MSG) {var dv = document.createElement('div')var time = document.createElement('div')var msg = document.createElement('div')time.className = 'middle'msg.className = 'msg'time.innerText = data.timemsg.innerText = data.msgdv.appendChild(time)dv.appendChild(msg)} else {var dv = document.createElement('div')var msg = document.createElement('div')var time = document.createElement('div')msg.className = 'middle'time.className = 'middle'msg.innerText = data.msgtime.innerText = data.timedv.appendChild(time)dv.appendChild(msg)}div.appendChild(dv)})//断开连接socket.addEventListener('close',function(e) {div.innerHTML = '服务断开连接'})</script></body>
</html>相关文章：
基于WebSocket的在线文字聊天室
与Ajax不同，WebSocket可以使服务端主动向客户发送响应，本案例就是基于WebSocket的一个在线聊天室，不过功能比较简单，只能满足文字交流。演示如下。 案例学习于b站up主，链接 。这位up主讲的非常清楚，值得去学…...
VS Code中C++程序的调试(Debug)功能
有一个.vscode文件，存放当前工作区相关配置文件的目录。 launch.json {"version": "0.2.0","configurations": [{"name": "gcc.exe - 生成和调试活动文件", // 该调试任务的名字，启动调试时会在待…...
C#四个字节十六进制与单精度浮点数互转
C#四个字节十六进制与单精度浮点数互转可以使用自带的函数，也可以自己写 实例如下： using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace floatDemo {class Program{//首先设置：项目->属性…...
Springloc和aop的基础概念
什么是控制反转和依赖注入？ 控制反转(IoC)和依赖注入(DI)是软件开发中常用的编程范式， 它们极大地提高了代码可维护性和可复用性，简化了代码结构。 什么是控制反转(IoC) 控制反转是- - 种编程模式，它将应用程序中的控制权转移到…...
算法练习Day43|● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ
LeetCode:518. 零钱兑换 II 518. 零钱兑换 II - 力扣（LeetCode） 1.思路 求组合数，先遍历物品再遍历背包，dp[]数组累加即可。 2.代码实现 1class Solution {2 public int change(int amount, int[] coins) {34 int[…...
人类：我觉得1+1=956446，你觉得呢？大模型：啊对对对
大模型太「听话」了怎么办？ 大型语言模型（LLM）的自然语言理解与生成能力一直备受称赞，特别是 ChatGPT 等对话式语言模型能够与人类流畅、自然地进行多轮对话。然而，最近一篇 Google DeepMind 的论文研究发现 LLM 普遍存…...
Offset Explorer
Offset Explorer 简介下载安装 简介 Offset Explorer（以前称为Kafka Tool）是一个用于管理和使Apache Kafka 集群的GUI应用程序。它提供了一个直观的UI，允许人们快速查看Kafka集群中的对象以及存储在集群主题中的消息。它包含面向开发人员和管…...
查看CentOS版本及系统位数与设置CentOS 7.9 2009 防火墙配置放开端口的命令与过程
一、查看CentOS版本及系统位数 1.1 命令汇总 //1、安装redhat-lsb yum install -y redhat-lsb//2、查看系统版本信息 lsb_release -a //3、查看系统位数 getconf LONG_BIT1.2 截图 二、设置CentOS7.9 2009 防火墙配置放开端口 2.1 命令汇总 //禁止防火墙开机启动。这种方法方…...
前端css高级
day08-CSS高级 目标：掌握定位的作用及特点；掌握 CSS 高级技巧 01-定位 作用：灵活的改变盒子在网页中的位置 实现： 1.定位模式：position 2.边偏移：设置盒子的位置 leftrighttopbottom 相对定位 posit…...
华为OD真题--字符串中最小的整数和--带答案
1. 华为OD机考题 答案 2023华为OD统一考试（AB卷）题库清单-带答案（持续更新） 2023年华为OD真题机考题库大全-带答案（持续更新） 2. 面试题 一手真实java面试题：2023年各大公司java面试真题汇总--…...
9月30日生效：微软官方服务协议更新，防止人工智能进行逆向工程
微软最近更新了其官方服务协议，新规则将于9月30日生效，包括多个新增和变化，具体细节请参考最新的微软服务协议。 微软最新更新涉及使用Bing Chat聊天机器人、Windows Copilot和Microsoft 365 Copilot服务，引起了广泛关注。这次更新…...
HarmonyOS教育类APP项目实战系列课结课考试答案（1-10讲）80分就合格
王丹辉（第一讲）：HarmonyOS教育类APP项目实战开课及低代码初体验 结课考试 及格分80/ 满分100 评价 判断题 1. DevEco Studio不能同时支持HarmonyOS和OpenHarmony应用/服务开发 正确(True)错误(False) 回答正确 2. DevEco Studio…...
为什么要学习Oracle技术?
为什么要学习Oracle技术? 众所周知，Oracle占据着企业数据库领域超过48.1%的市场份额，成为高端企业数据库软件的绝对领导者。随着时间的推移，企业数据库的规模不断扩大，富有经验的资深OracleDBA越来越受到企业的欢迎。我们从著名的…...
ffmpeg+intel核显实现硬解码
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、前言二、检查方法1.图形法2.nvidia-smi3.intel-gpu-tools 三、安装使用1.libva-dev2.libva-utils3.编译安装4.测试1.vainfo2.ffmpeg测试解码 总结 前言 之…...
电脑开机出现Boot Device怎么办？
开机出现Boot Device这个问题很常见，有时还会出现No Boot Device的问题，虽然多了一个单词，但意思是相同的，这些问题说明你的系统盘出现了问题，或者是引导出现了问题。这该如何解决呢？ 方法1. 检查主板或硬盘…...
面试题. 一次编辑
字符串有三种编辑操作:插入一个英文字符、删除一个英文字符或者替换一个英文字符。 给定两个字符串，编写一个函数判定它们是否只需要一次(或者零次)编辑。 示例 1: 输入: first "pale" second "ple" 输出: True 示例 2: 输入: first &…...
Unity悬浮显示提示内容
在编写unity时，需要实现鼠标在某一个按钮上时，就显示其子物体中对应的下拉菜单，为此编写了一个公共类，对于需要悬浮显示的控件均可挂载此类。代码如下： using UnityEngine; using UnityEngine.EventSystems; using Un…...
变形金刚在图像识别方面比CNN更好吗？
链接到文 — https://arxiv.org/pdf/2010.11929.pdf 一、说明 如今，在自然语言处理（NLP）任务中，转换器已成为goto架构（例如BERT，GPT-3等）。另一方面，变压器在计算机视觉任务中的使用…...
【Javascript】ES6新增之类的认识
在现代编程语言中，类是面向对象编程范式中的核心概念之一。 与函数类似，类本质上是一种特殊的函数，它允许我们将数据和操作封装在一起，以创建具有共同行为和状态的对象。 在类的世界里，我们有类表达式和类声明…...
C#随机法 双峰函数 求极值 避免落入局部最优解
避免落入局部最优解，只要让步长够长即可。 x1 resultX1 random1.NextDouble()*100; 如果后面不乘以100，则很大概率落入负数的最大值 Random random1 new Random(DateTime.Now.Millisecond);double x1 0, resultX10,max-999999,maxTemp0;for (int i …...
终极KCC多设备兼容指南：Kindle、Kobo、ReMarkable全支持的漫画转换神器
终极KCC多设备兼容指南：Kindle、Kobo、ReMarkable全支持的漫画转换神器 【免费下载链接】kcc KCC (a.k.a. Kindle Comic Converter) is a comic and manga converter for ebook readers. 项目地址: https://gitcode.com/gh_mirrors/kc/kcc KCC（Ki…...
GPT-SoVITS快速上手实测：仅需1段录音，打造你的个人语音助手
GPT-SoVITS快速上手实测：仅需1段录音，打造你的个人语音助手 1. 引言：声音克隆技术的新突破 你是否想过，只需要录制一段1分钟的语音，就能让AI完美模仿你的声音？GPT-SoVITS让这个想法变成了现实。这个开源项…...
Harmonyos在语文教学中应用-16. 整理小书包（对应：小书包）
16. 整理小书包（对应：小书包） 功能介绍： 培养《小书包》中良好生活习惯的模拟整理游戏。屏幕上散落着书本、铅笔、橡皮、尺子等物品。学生需要长按物品将其拖拽到“书包”区域。整理完成后，系统给予评价：“你的书包真整洁！”，教育学生爱惜文具，整理书包。 应用功能：…...
lil_tea c++ style guide耸
一、中间件是啥？咱用“餐厅”打个比方 想象一下，你的FastAPI应用是个高级餐厅。 ?? 顾客（客户端请求）来到门口。- 迎宾（CORS中间件）：先看你是不是从允许的街区（域名）来…...
通义千问3-Reranker-0.6B应用指南：快速搭建智能问答排序服务
通义千问3-Reranker-0.6B应用指南：快速搭建智能问答排序服务 1. 引言：为什么选择Qwen3-Reranker-0.6B 在信息爆炸的时代，如何从海量文本中快速找到最相关的内容成为一大挑战。Qwen3-Reranker-0.6B作为通义千问家族的最新成员，专…...
 Core)
AQS (AbstractQueuedSynchronizer) Core
AQS (AbstractQueuedSynchronizer) Core AQS is the foundation of almost everything in java.util.concurrent. It provides: an int state a CLH wait queue. Subclasses just define what state means. What’s Built on AQS AQS ├── ReentrantLock (state h…...
DimmerLED：基于ATmega328P的MySensors LED调光固件
1. 项目概述DimmerLED 是一个面向智能家居场景的嵌入式LED调光控制器固件，其核心设计目标是将硬件级PWM调光能力与MySensors无线传感网络协议栈深度集成，实现低功耗、高可靠、可远程控制的照明节点。该固件并非通用LED驱动库，而是一个完整可部…...
# 016、AutoSAR CP操作系统（OS）配置与任务调度：那个让我加班到凌晨三点的调度死锁
上周在联调ECU唤醒流程时，遇到一个诡异现象：系统唤醒后运行几分钟就卡死，仿真器显示所有任务都停在WaitEvent状态。抓了三天Trace才发现，是OS任务优先级配反了——高优先级任务等低优先级任务释放资源，低优先级任务又被中等优先级任务抢占，经典的优先级反转没处理好。今天…...
LP8 CO₂传感器Arduino库详解：MODBUS-RTU通信与NDIR数据处理
1. LP8 CO₂传感器Arduino库深度解析与工程实践指南1.1 库定位与核心价值LP8 CO₂传感器Arduino库是一个面向嵌入式环境的轻量级、高可靠性MODBUS-RTU通信封装库，专为意法半导体（STMicroelectronics）旗下LP8系列非分散红外（NDIR&a…...
麒麟V10系统下微信PC版安装与系统升级全攻略
1. 麒麟V10系统与微信PC版适配现状 最近两年国产操作系统发展迅猛，银河麒麟V10作为其中的佼佼者，已经能够流畅运行微信PC版。但很多用户在安装过程中还是会遇到各种"拦路虎"——找不到安装包、依赖缺失、版本冲突等问题层出不穷。 我实测发现&…...