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

基于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不同&#xff0c;WebSocket可以使服务端主动向客户发送响应&#xff0c;本案例就是基于WebSocket的一个在线聊天室&#xff0c;不过功能比较简单&#xff0c;只能满足文字交流。演示如下。 案例学习于b站up主&#xff0c;链接 。这位up主讲的非常清楚&#xff0c;值得去学…...

VS Code中C++程序的调试(Debug)功能

有一个.vscode文件&#xff0c;存放当前工作区相关配置文件的目录。 launch.json {"version": "0.2.0","configurations": [{"name": "gcc.exe - 生成和调试活动文件", // 该调试任务的名字&#xff0c;启动调试时会在待…...

C#四个字节十六进制与单精度浮点数互转

C#四个字节十六进制与单精度浮点数互转可以使用自带的函数,也可以自己写 实例如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace floatDemo {class Program{//首先设置:项目->属性…...

Springloc和aop的基础概念

什么是控制反转和依赖注入&#xff1f; 控制反转(IoC)和依赖注入(DI)是软件开发中常用的编程范式&#xff0c; 它们极大地提高了代码可维护性和可复用性&#xff0c;简化了代码结构。 什么是控制反转(IoC) 控制反转是- - 种编程模式&#xff0c;它将应用程序中的控制权转移到…...

算法练习Day43|● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ

LeetCode:518. 零钱兑换 II 518. 零钱兑换 II - 力扣&#xff08;LeetCode&#xff09; 1.思路 求组合数&#xff0c;先遍历物品再遍历背包&#xff0c;dp[]数组累加即可。 2.代码实现 1class Solution {2 public int change(int amount, int[] coins) {34 int[…...

人类:我觉得1+1=956446,你觉得呢?大模型:啊对对对

大模型太「听话」了怎么办&#xff1f; 大型语言模型&#xff08;LLM&#xff09;的自然语言理解与生成能力一直备受称赞&#xff0c;特别是 ChatGPT 等对话式语言模型能够与人类流畅、自然地进行多轮对话。然而&#xff0c;最近一篇 Google DeepMind 的论文研究发现 LLM 普遍存…...

Offset Explorer

Offset Explorer 简介下载安装 简介 Offset Explorer&#xff08;以前称为Kafka Tool&#xff09;是一个用于管理和使Apache Kafka 集群的GUI应用程序。它提供了一个直观的UI&#xff0c;允许人们快速查看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高级 目标&#xff1a;掌握定位的作用及特点&#xff1b;掌握 CSS 高级技巧 01-定位 作用&#xff1a;灵活的改变盒子在网页中的位置 实现&#xff1a; 1.定位模式&#xff1a;position 2.边偏移&#xff1a;设置盒子的位置 leftrighttopbottom 相对定位 posit…...

华为OD真题--字符串中最小的整数和--带答案

1. 华为OD机考题 答案 2023华为OD统一考试&#xff08;AB卷&#xff09;题库清单-带答案&#xff08;持续更新&#xff09; 2023年华为OD真题机考题库大全-带答案&#xff08;持续更新&#xff09; 2. 面试题 一手真实java面试题&#xff1a;2023年各大公司java面试真题汇总--…...

9月30日生效:微软官方服务协议更新,防止人工智能进行逆向工程

微软最近更新了其官方服务协议&#xff0c;新规则将于9月30日生效&#xff0c;包括多个新增和变化&#xff0c;具体细节请参考最新的微软服务协议。 微软最新更新涉及使用Bing Chat聊天机器人、Windows Copilot和Microsoft 365 Copilot服务&#xff0c;引起了广泛关注。这次更新…...

HarmonyOS教育类APP项目实战系列课结课考试答案(1-10讲)80分就合格

王丹辉&#xff08;第一讲&#xff09;&#xff1a;HarmonyOS教育类APP项目实战开课及低代码初体验 结课考试 及格分80/ 满分100 评价 判断题 1. DevEco Studio不能同时支持HarmonyOS和OpenHarmony应用/服务开发 正确(True)错误(False) 回答正确 2. DevEco Studio…...

为什么要学习Oracle技术?

为什么要学习Oracle技术? 众所周知&#xff0c;Oracle占据着企业数据库领域超过48.1%的市场份额&#xff0c;成为高端企业数据库软件的绝对领导者。随着时间的推移&#xff0c;企业数据库的规模不断扩大&#xff0c;富有经验的资深OracleDBA越来越受到企业的欢迎。我们从著名的…...

ffmpeg+intel核显实现硬解码

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、前言二、检查方法1.图形法2.nvidia-smi3.intel-gpu-tools 三、安装使用1.libva-dev2.libva-utils3.编译安装4.测试1.vainfo2.ffmpeg测试解码 总结 前言 之…...

电脑开机出现Boot Device怎么办?

开机出现Boot Device这个问题很常见&#xff0c;有时还会出现No Boot Device的问题&#xff0c;虽然多了一个单词&#xff0c;但意思是相同的&#xff0c;这些问题说明你的系统盘出现了问题&#xff0c;或者是引导出现了问题。这该如何解决呢&#xff1f; 方法1. 检查主板或硬盘…...

面试题. 一次编辑

字符串有三种编辑操作:插入一个英文字符、删除一个英文字符或者替换一个英文字符。 给定两个字符串&#xff0c;编写一个函数判定它们是否只需要一次(或者零次)编辑。 示例 1: 输入: first "pale" second "ple" 输出: True 示例 2: 输入: first &…...

Unity悬浮显示提示内容

在编写unity时&#xff0c;需要实现鼠标在某一个按钮上时&#xff0c;就显示其子物体中对应的下拉菜单&#xff0c;为此编写了一个公共类&#xff0c;对于需要悬浮显示的控件均可挂载此类。代码如下&#xff1a; using UnityEngine; using UnityEngine.EventSystems; using Un…...

变形金刚在图像识别方面比CNN更好吗?

链接到文 — https://arxiv.org/pdf/2010.11929.pdf 一、说明 如今&#xff0c;在自然语言处理&#xff08;NLP&#xff09;任务中&#xff0c;转换器已成为goto架构&#xff08;例如BERT&#xff0c;GPT-3等&#xff09;。另一方面&#xff0c;变压器在计算机视觉任务中的使用…...

【Javascript】ES6新增之类的认识

在现代编程语言中&#xff0c;类是面向对象编程范式中的核心概念之一。 与函数类似&#xff0c;类本质上是一种特殊的函数&#xff0c;它允许我们将数据和操作封装在一起&#xff0c;以创建具有共同行为和状态的对象。 在类的世界里&#xff0c;我们有类表达式和类声明&#xf…...

C#随机法 双峰函数 求极值 避免落入局部最优解

避免落入局部最优解&#xff0c;只要让步长够长即可。 x1 resultX1 random1.NextDouble()*100; 如果后面不乘以100&#xff0c;则很大概率落入负数的最大值 Random random1 new Random(DateTime.Now.Millisecond);double x1 0, resultX10,max-999999,maxTemp0;for (int i …...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...