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

采用nodejs + socket.io实现简易聊天室功能（群聊 + 私聊）

news 文章来源：https://blog.csdn.net/haodian666/article/details/132757138 2024/11/19 2:48:05

项目演示

支持群聊以及私聊
在这里插入图片描述

项目代码

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/socket.io/socket.io.js"></script><style>.box {display: flex;justify-content: space-between;width: 800px;margin: 50px auto;text-align: center;}.box>div {flex: 1;}.box .center {flex: 2;}.box .center input {width: 70%;}.list {list-style: none;text-align: left;}</style>
</head><body><div class="box"><div class="left"><div class="num">在线人数：1</div></div><div class="center"><h1 style="margin-bottom: 20px;">简易聊天室</h1><!-- 输入框 --><input type="text" class="ipt"><!-- 发送 --><button class="btn">发送消息</button><!-- 输入框 --><input type="text" class="joinNum"><!-- 加入房间 --><button class="joinBtn">加入房间</button><ul class="list" style="margin-top: 40px;"><!-- <li class="list-group-item">An item</li> --></ul></div><div class="right"><!-- <div>xxx已进入</div> --></div></div><script>let num = document.querySelector('.num')let ipt = document.querySelector('.ipt')let btn = document.querySelector('.btn')let joinNum = document.querySelector('.joinNum')let joinBtn = document.querySelector('.joinBtn')let list = document.querySelector('.list')let left = document.querySelector('.left')let center = document.querySelector('.center')let right = document.querySelector('.right')let socket = io()const name = prompt('请输入你的名称：')//把用户名称传递给服务端socket.emit('join', name)// 监听用户已进入 | 已退出socket.on('join', (obj) => {right.innerHTML += `<div>${obj.name} ${obj.status}</div>`})// 监听用户在线人数socket.on('userNum', (n) => {num.innerHTML = `在线人数：${n} 个人`})// 点击发送按钮 发送消息btn.addEventListener('click', function () {// 将数据传递给服务端socket.emit('value', ipt.value)})// 键盘按下回车 发送消息ipt.addEventListener('keydown', function (e) {if (e.key !== 'Enter') return// 将数据传递给服务端socket.emit('value', ipt.value)})// 加入房间joinBtn.addEventListener('click', function () {socket.emit("joinRoom", { room: joinNum.value, value: ipt.value })})// 服务端再把数据响应回来socket.on('value', (value) => {list.innerHTML += `<li>${value}</li>`ipt.value = ''})</script>
</body></html>

index.js

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);app.get("/", (req, res) => {res.sendFile(__dirname + "/index.html");
});let userNum = 0; //当前在线人数io.on("connection", (socket) => {// 访问聊天室用户在线输了加1++userNum;// 将用户在线数量实时同步给客户端io.emit("userNum", userNum);// 相应客户端传递的数据socket.on("value", (value) => {io.emit("value", `${socket.username}：${value}`);});// 监听用户进入聊天室socket.on("join", (name) => {socket.username = name;io.emit("join", {name: name,status: "已进入",});});// 离开聊天室用户在线数量减1socket.on("disconnect", () => {--userNum;io.emit("userNum", userNum);io.emit("join", {name: socket.username,status: "已退出",});});// 加入房间socket.on("joinRoom", ({ room, value }) => {// 加入指定的房间socket.join(room);// 在指定房间中发送消息io.to(room).emit("value", `${socket.username}：${value}`);});
});http.listen(1231, () => {console.log("服务器已启动：http://localhost:1231");
});

package.json

{"name": "WebSocket","version": "1.0.0","main": "index.js","scripts": {"start": "node index.js"},"license": "MIT","dependencies": {"express": "^4.18.2","socket.io": "^4.5.4"}
}

通过 npm run start 运行项目

相关文章：

采用nodejs + socket.io实现简易聊天室功能（群聊 + 私聊）

项目演示 支持群聊以及私聊 项目代码 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport…...

编程日记 2023/9/16 22:11:00

消息队列（一）：需求分析

为什么要做这样一个项目&#xff1f; 首先&#xff0c;我们在之前学习的时候&#xff0c;就认识了一下 生产者消费者模式&#xff0c;这样一个模式有两大好处&#xff1a; 解耦合 本来有个分布式系统&#xff0c;A服务器 调⽤ B服务器&#xff08;A给B发请求&#xff0c;B给A…...

编程日记 2023/9/16 22:08:58

ImageViewer技术实现细节

第1章 ImageViewer工具使用方法 1.1. 图像加载 1.1.1. 单图像加载 左上角菜单，“File”->“单图像”，或者Ctrl-S,弹出文件对话框，选择图像文件，当前支持bmp，png，jpg格式。 结果如下图所示： 1.1.2. 多图像加载 左上角菜单，“File”->“多图像”，或者Ctrl-M…...

编程日记 2023/9/16 22:07:57

MFC多文档程序，从菜单关闭一个文档和直接点击右上角的x效果不同

MFC多文档程序&#xff0c;从菜单关闭一个文档和直接点击右上角的x效果不同 若文档内容有修改&#xff0c;则前者会询问用户&#xff0c;是否保存修改&#xff1b;后者不保存修改直接关闭。 原因在于&#xff0c;从菜单关闭时&#xff0c;调用OnClose&#xff0c;一定会调用Sa…...

编程日记 2023/9/16 22:05:55

【数据结构】C++实现AVL平衡树

文章目录 1.AVL树的概念2.AVL树的实现AVL树结点的定义AVL树的插入AVL树的旋转左单旋右单旋左右双旋右左双旋插入代码 AVL树的验证AVL树的查找AVL树的修改AVL树的删除AVL树的性能 AVL树的代码测试 1.AVL树的概念 二叉搜索树虽然可以提高我们查找数据的效率&#xff0c;但如果插…...

编程日记 2023/9/16 22:04:54

图神经网络系列之序章

文章目录 一、为什么需要图神经网络&#xff1f;二、图的定义1.图的定义和种类2.一些关于图的重要概念2.1 子图2.2 连通图2.3 顶点的度、入度和出度2.4 边的权和网2.5 稠密图、稀疏图 3.图的存储结构3.1 邻接矩阵3.2 邻接表3.3 边集数组3.4 邻接多重表3.5 十字链表3.6 链式前向…...

编程日记 2023/9/16 22:03:53

Unity中 UI Shader的基本功能

文章目录 前言一、实现思路1、暴露一个 2D 类型的属性来接受UI的纹理2、设置shader的层级为TransParent半透明渲染层级&#xff0c;一般UI都是在这个渲染层级3、更改混合模式&#xff0c;是 UI 使用的纹理&#xff0c;该透明的地方透明 二、代码实现 前言 Unity中 UI Shader的…...

编程日记 2023/9/16 22:00:50

【自学开发之旅】Flask-标准化返回-连接数据库-分表-orm-migrate-增删改查（三）

业务逻辑不能用http状态码判断&#xff0c;应该有自己的逻辑判断。想要前端需要判断&#xff08;好多if…else&#xff09;&#xff0c;所以需要标准化&#xff0c;标准化返回。 json标准化返回: 最外面&#xff1a;data,message,code三个字段。 data&#xff1a;返回的数据 co…...

编程日记 2023/9/16 21:58:48

numpy增删改查

NumPy是一个用于科学计算的Python库&#xff0c;它提供了一个多维数组对象以及许多用于操作这些数组的函数。下面是关于如何在NumPy中进行增删改查操作的一些基本示例&#xff1a; 创建NumPy数组&#xff1a; import numpy as np # 创建一个一维数组 arr np.array([1, 2, 3, …...

编程日记 2023/9/16 21:56:47

【kafka】kafka重要的集群参数配置

如何规划Kafka 对于实际应用的生产环境中&#xff0c;需要尽量先规划设计好集群&#xff0c;避免后期业务上线后费力调整。在考量部署方案时需要通盘考虑&#xff0c;不能仅从单个维度上进行评估&#xff0c;下面是几个重要的维度的考量和建议&#xff1a; 这里重点说说操作系…...

编程日记 2023/9/16 21:55:46

cs224w_colab3_2023 And cs224w_colab4_2023学习笔记

class GNNStack(torch.nn.Module):def __init__(self, input_dim, hidden_dim, output_dim, args, embFalse):super(GNNStack, self).__init__() #这里的继承表示参见 https://blog.csdn.net/wanzew/article/details/106993425 # 继承时运行继承类别的函数 总之 __mro__的目的…...

编程日记 2023/9/16 21:54:46

Cannot find module ‘prop-types‘

把这个import删了。...

编程日记 2023/9/16 21:52:44

LeetCode-63-不同路径Ⅱ-动态规划

题目描述&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那…...

编程日记 2023/9/16 21:50:42

unity 使用Photon进行网络同步

Pun使用教程 第一步&#xff1a;请确保使用的 Unity 版本等于或高于 2017.4&#xff08;不建议使用测试版&#xff09;创建一个新项目。 第二步&#xff1a;打开资源商店并找到 PUN 2 资源并下载/安装它。 导入所有资源后&#xff0c;让 Unity 重新编译。 第三步&#xf…...

编程日记 2023/9/16 21:46:38

大数据课程M1——ELK的概述

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解ELK的定义&#xff1b; ⚪ 掌握ELK的使用&#xff1b; 一、什么是ELK 1. 简介 ELK 是elastic公司提供的一套完整的日志收集以及展示的解决方案&#xff0c;是三个…...

编程日记 2023/9/16 21:45:37

C# byte[] 如何转换成byte*

目标:将byte[]转成byte*以方便使用memcpy [DllImport("kernel32.dll", EntryPoint "RtlCopyMemory", CharSet CharSet.Ansi)] public extern static long CopyMemory(IntPtr dest, IntPtr source, int size); private void butTemp_Click(object…...

编程日记 2023/9/16 21:44:36

MySQL与Oracle的分页

MySQL与Oracle的分页 当我们通过SQL去查询一个结果集的时候&#xff0c;并不需要查看所有行&#xff0c;可能只是查看前几行&#xff0c;或者中间的几行。则需要像MySQL的limit或Oracle的ROWNUM与FETCH NEXT来实现。 MySQL 语法 SELECT * FROM table_name LIMIT [offset,] ro…...

编程日记 2023/9/16 21:43:35

git基本手册

Git and GitHub for Beginners Tutorial - YouTube Kevin Stratvert git config --global user.name “xxx” git config --global user.email xxxxx.com 设置默认分支 git config --global init.default branch main git config -h查看帮助 详细帮助 git help config 清除 cl…...

编程日记 2023/9/16 21:39:30

每日一题（两数相加）

每日一题&#xff08;两数相加&#xff09; 2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 思路 思路&#xff1a; 由于链表从头开始向后存储的是低权值位的数据&#xff0c;所以只需要两个指针p1和p2&#xff0c;分别从链表的头节点开始遍历。同时创建一个新的指针new…...

编程日记 2023/9/16 21:37:28

恒运资本：沪指震荡涨0.28%，医药板块强势拉升，金融等板块上扬

15日早盘&#xff0c;沪指盘中震荡上扬&#xff0c;科创50指数表现强势&#xff1b;北向资金小幅净流入。 到午间收盘&#xff0c;沪指涨0.28%报3135.31点&#xff0c;深成指、创业板指涨均0.11%&#xff0c;科创50指数涨1.04%&#xff1b;两市合计成交4357亿元&#xff0c;北…...

编程日记 2023/9/16 21:36:27

【计算机网络】Tcp详解

文章目录 前言Tcp协议段格式TCP的可靠性面向字节流应答机制超时重传流量控制滑动窗口&#xff08;重要&#xff09;拥塞控制延迟应答捎带应答标志位具体标志位三次握手四次挥手粘包问题TCP异常情况listen的第二个参数 前言 前面我们学习了传输层协议Udp&#xff0c;今天我们一…...

编程日记 2023/9/16 21:34:23

最简单的laravel不使用任何扩展导出csv

php导出csv是非常常用的操作&#xff0c;网上也有灰常多的扩展。如果只是单纯的导出csv数据&#xff0c;完全没有必要去用扩展。现在做项目&#xff0c;都是代码能少就少&#xff0c;扩展能不用就不用。好了&#xff0c;不废话了&#xff0c;开干&#xff01; 直接搞一个方法&…...

编程日记 2023/9/16 21:33:22

Android studio 断点调试、日志断点

目录 参考文章参考文章1、运行调试2、调试操作3、断点类型行断点的使用场景属性断点的使用场景异常断点的使用场景方法断点的使用场景条件断点日志断点 4、断点管理区 参考文章 参考文章 1、运行调试 开启 Debug 调试模式有两种方式&#xff1a; Debug Run&#xff1a;直接…...

编程日记 2023/9/16 21:32:21

服务器数据恢复-热备盘同步过程中硬盘离线的RAID5数据恢复案例

服务器数据恢复环境&#xff1a; 华为OceanStor某型号存储&#xff0c;11块硬盘组建了一组RAID5阵列&#xff0c;另外1块硬盘作为热备盘使用。基于RAID5阵列的LUN分配给linux系统使用&#xff0c;存放Oracle数据库。 服务器故障&#xff1a; RAID5阵列1块硬盘由于未知原因离线…...

编程日记 2023/9/16 21:30:19

Python 使用input获取用户输入

视频版教程 Python3零基础7天入门实战视频教程 input()函数用于向用户生成一条提示&#xff0c;然后获取用户输入的内容。由于input()函数总会将用户输入的内容放入字符串中&#xff0c;因此用户可以输入任何内容&#xff0c;input()函数总是返回一个字符串。我们可以通过int(…...

编程日记 2023/9/16 21:29:18

Python 可迭代对象、迭代器、生成器

可迭代对象 定义 在Python的任意对象中&#xff0c;只要它定义了可以返回一个迭代器的 __iter__ 魔法方法&#xff0c;或者定义了可以支持下标索引的 __getitem__ 方法&#xff0c;那么它就是一个可迭代对象&#xff0c;通俗的说就是可以通过 for 循环遍历了。Python 原生的列…...

编程日记 2023/9/16 21:27:16

HTML的有序列表、无序列表、自定义列表

目录 背景: 过程: 有序列表: 简介: 代码展示: 效果展示:​ 无序列表: 简介: 代码展示: 效果展示:​ 自定义列表: 简介&#xff1a; 代码展示: 效果展示:​ 总结&#xff1a; 背景: 1.有序列表&#xff08;Ordered List&#xff09;&#xff1a; 有序列表是最早的…...

编程日记 2023/9/16 21:24:12

银河麒麟安装Docker-国产化-九五小庞

银河麒麟高级服务器操作系统 V10 是针对企业级关键业务&#xff0c;适应虚拟化、 云计算、大数据、工业互联网时代对主机系统可靠性、安全性、性能、扩展性和 实时性的需求&#xff0c;依据 CMMI 5 级标准研制的提供内生安全、云原生支持、国产 平台深入优化、高性能、易管理的…...

编程日记 2023/9/16 21:23:12

数据库与身份认证

1. 数据库的基本概念 1.1 什么是数据库 数据库&#xff08;database&#xff09;是用来组织、存储和管理数据的仓库。 当今世界是一个充满着数据的互联网世界&#xff0c;充斥着大量的数据。数据的来源有很多&#xff0c;比如出行记录、消费记录、浏览的网页、发送的消息…...

编程日记 2023/9/16 21:22:11

LabVIEW开发锅炉汽包水位的监督控制和模拟

LabVIEW开发锅炉汽包水位的监督控制和模拟 控制锅炉汽包液位对于机械的安全和设备的保护至关重要。滚筒液位控制器的工作是将滚筒液位提高到指定的设定点&#xff0c;并保持在那里&#xff0c;同时保持一致的蒸汽负荷。锅炉管可能会因该水平急剧下降而暴露&#xff0c;这会导致…...

编程日记 2023/9/16 21:21:10

做h5最好的网站/免费收录链接网

总结一下auniapp开发安卓app的调试方式及打包; 代码编程查看文档即可.; 1通过vue-cli方式初始化项目 参考地址: https://uniapp.dcloud.io/quickstart-cli 2 将app实时安装到手机上 使用vscode编辑代码, 使用hubuilder去调试运行及打包 手机打开开发者模式 连接电脑 选中运…...

编程日记 2024/11/18 23:14:23

网站无icp备案/人力资源培训与开发

前端框架里头&#xff0c;功能比较齐全的一个。 可以跟vue结合&#xff0c;跟sprintboot整合。 之所以推荐&#xff0c;是因为我被他的报表中心-大屏报表所吸引&#xff0c;而且支持diy。 上一个地址吧&#xff1a;http://vue.misboot.com/ topui的首页&#xff1a;https://www…...

编程日记 2024/11/18 17:07:34

如何做平台网站/常州百度关键词优化

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件&#xff…...

编程日记 2024/11/18 15:56:15

网站搭建设计 是什么/今日热搜排行第一名

List<Map>是什么意思&#xff1f; List集合中的对象是一个Map对象,而这个Map对象的键是String类型,值是Object类型 List以Map接口对象为列表对象。 Map以String为键&#xff0c;以Object为值。 List里只能放Map类型的对象&#xff0c;而这个Map类型的对象又只能放以St…...

编程日记 2024/11/18 15:48:11

要点营销网站/seo优化常识

https://www.cnblogs.com/niuben/p/12558841.html...

编程日记 2024/11/18 11:36:19

建设银行招聘网站甘肃分行/信息流优化师证书

管理 Linux 系统中的文件和目录&#xff0c;除了可以设定普通权限和特殊权限外&#xff0c;还可以利用文件和目录具有的一些隐藏属性。chattr 命令&#xff0c;专门用来修改文件或目录的隐藏属性&#xff0c;只有 root 用户可以使用。该命令的基本格式为&#xff1a;[rootlocal…...

编程日记 2024/11/18 11:34:14