基于websocket与node搭建简易聊天室

一、前言

上一篇文章介绍了websocket的详细用法与工具类的封装，本篇就基于websocket搭建一个简易实时的聊天室。

在本篇开始之前也可以去回顾一下websocket详细用法：WebSocket详解与封装工具类

在这里插入图片描述

二、基于node搭建后台websocket服务

首先确认本机电脑中是否安装node，可以通过cmd打开命令窗口运行node -v查看node版本；

  1. 建议创建一个空项目：
npm init
  1. 一路回车就行，然后就得到了一个package.json的配置文件；安装ws模块
npm i ws
  1. 新建app.js文件，源码如下：
const WebSocket = require('ws');
// 随机姓名
const names = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何','吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛','奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑','薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余','元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹'
];
// 获取随便昵称
const getRandom = (min, max) => {return Math.floor(Math.random() * (min - max) + max)
};
// 创建 WebSocket 服务器实例
const wss = new WebSocket.Server({port: 8080
});
// 监听连接事件
wss.on('connection', function(socket) {console.log('新连接');const randomIndex = getRandom(0, names.length - 1);socket.nickname = names.splice(randomIndex, 1)[0];sendMessageToClient( '连接成功！进入聊天室！');// 监听接收消息事件socket.on('message', function(message) {sendMessageToClient(message);});// 监听接收消息事件socket.on('close', function() {// 广播消息给所有客户端wss.clients.forEach(function each(client) {if (client.readyState === WebSocket.OPEN) {client.send(JSON.stringify({nickname: socket.nickname,msg: '退出聊天室！',}));}});});// 监听接收消息事件socket.on('error', function() {// 广播消息给所有客户端wss.clients.forEach(function each(client) {if (client.readyState === WebSocket.OPEN) {client.send(JSON.stringify({nickname: socket.nickname,msg: '网络不佳，连接失败 ！',}));}});});// 发送消息到客户端function sendMessageToClient(message) {let targetMsg = message instanceof Buffer ? message.toString() : message;// 广播消息给所有客户端wss.clients.forEach(function each(client) {if (client.readyState === WebSocket.OPEN) {client.send(JSON.stringify({nickname: socket.nickname,msg: targetMsg,}));}});}
});
  1. 最后启动node服务：node app.js;

三、前端构建聊天室

3.1 确定功能点

  1. 会话框中展示聊天内容；
  2. 输入框与发送按钮发送消息内容；
  3. 连接websocket，监听实时消息展示到界面中；

3.2 界面结构搭建

在这里插入图片描述

代码结构：

<div class="main_container"><!-- 消息框 --><div id="msgList"></div><!-- 发送消息 --><div class="controls"><input type="text" class="pushMsg" /><button id="btn">发送</button></div>
</div>

3.3 代码逻辑

  1. 引入之前封装的websocket工具类；

    <script src="./utils/websocket.js"></script>

  2. 实例化连接websocket；

    const newWebSocket = new WebSocketClient('ws:localhost:8080');
newWebSocket.connect();

  3. 定义消息列表，监听返回消息信息，根据消息展示到界面中；

    // 消息列表
const msgList = [];
newWebSocket.addEventListener('message', handleMessage);
// 处理返回数据
function handleMessage(msg) {const msgData = JSON.parse(msg.data || '{}');console.log(msgData, "返回数据====");if (msgData && typeof msgData.msg === 'string' && !msgData.msg.includes('ping')) {msgList.push({name: msgData.nickname,msg: msgData.msg,});const str = msgList.reduce((cur, next) => {let curMsg = '';if (next.msg.includes('连接')) {curMsg = `<div class="center_msg">玩家：${next.name}_${next.msg}</div>`;} else {curMsg = `<div class="msg_line"><div class="avatar">${next.name}</div><div class="msg_text">${next.msg}</div></div>`;}return cur += curMsg;}, '');$('#msgList').html(str);// 获取设置了滚动属性的div标签const div = document.getElementById('msgList');// 设置滚动的顶点坐标为滚动的总高度div.scrollTop = div.scrollHeight;}
}newWebSocket.addEventListener('message', handleMessage);
// 处理返回数据
function handleMessage(msg) {const msgData = JSON.parse(msg.data || '{}');console.log(msgData, "返回数据====");if (msgData && typeof msgData.msg === 'string' && !msgData.msg.includes('ping')) {msgList.push({name: msgData.nickname,msg: msgData.msg,});const str = msgList.reduce((cur, next) => {let curMsg = '';if (next.msg.includes('连接')) {curMsg = `<div class="center_msg">玩家：${next.name}_${next.msg}</div>`;} else {curMsg = `<div class="msg_line"><div class="avatar">${next.name}</div><div class="msg_text">${next.msg}</div></div>`;}return cur += curMsg;}, '');$('#msgList').html(str);// 获取设置了滚动属性的div标签const div = document.getElementById('msgList');// 设置滚动的顶点坐标为滚动的总高度div.scrollTop = div.scrollHeight;}
}

  4. 监听输入框回车事件，与发送按钮点击事件，发送消息；

    // 监听发送按钮
$('#btn').on('click', sendMessage);// 输入框回车事件
$('.pushMsg').keydown(function(event) {if (event.key === 'Enter') {sendMessage();}
});
// 发送消息
function sendMessage() {const msg = $('.pushMsg').val();if (msg) {newWebSocket.send(`${msg}`);$('.pushMsg').val('');}
}

四、涉及小知识点

  1. 取消滚动条的展示，发送消息后默认展示最下方数据；

    #msgList::-webkit-scrollbar {width: 0;
}

    // 获取设置了滚动属性的div标签
const div = document.getElementById('msgList');
// 设置滚动的顶点坐标为滚动的总高度
div.scrollTop = div.scrollHeight;

  2. 输入框监听keydown事件，当key为Enter时发送消息（也可设置其他按键）

    // 输入框回车事件
$('.pushMsg').keydown(function(event) {if (event.key === 'Enter') {sendMessage();}
});

  3. 取消input的光标进入的表框效果

    outline: none;

  4. 鼠标小手的出现

    cursor: pointer;

五、聊天室完整前端源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>聊天通信</title><script src="./utils/jquery.min.js"></script><script src="./utils/websocket.js"></script><style>.main_container {width: 500px;margin: auto;}#msgList {width: 500px;height: 400px;overflow: auto;border: 2px solid #8491fe;border-radius: 10px;padding: 6px;background-color: #ebffff;box-sizing: border-box;}#msgList::-webkit-scrollbar {width: 0;}.msg_line {margin: 10px 0;display: flex;flex-wrap: wrap;}.avatar {width: 30px;height: 30px;border-radius: 50%;background-color: #77ffff;text-align: center;line-height: 30px;color: #333;font-size: 12px;margin-right: 6px;}.msg_text {display: inline-block;padding: 4px 12px;border-radius: 6px;background-color: #f0f1dd;font-size: 14px;}.center_msg {text-align: center;color: #f19597;}.controls {width: 100%;display: flex;justify-content: space-between;margin-top: 10px;}input {flex: 1;outline: none;height: 34px;line-height: 34px;border: 1px solid #d8d8d8;border-radius: 4px;padding: 0 4px;color: #333;margin-right: 12px;}#btn {width: 80px;height: 34px;cursor: pointer;}</style></head><body><div class="main_container"><!-- 消息框 --><div id="msgList"></div><!-- 发送消息 --><div class="controls"><input type="text" class="pushMsg" /><button id="btn">发送</button></div></div><script src="./utils/websocket.js"></script><script>// 消息列表const msgList = [];// 初始化websocketconst newWebSocket = new WebSocketClient('ws:localhost:8080');newWebSocket.connect();window.NewWebSocket = newWebSocket;newWebSocket.addEventListener('message', handleMessage);// 处理返回数据function handleMessage(msg) {const msgData = JSON.parse(msg.data || '{}');console.log(msgData, "返回数据====");if (msgData && typeof msgData.msg === 'string' && !msgData.msg.includes('ping')) {msgList.push({name: msgData.nickname,msg: msgData.msg,});const str = msgList.reduce((cur, next) => {let curMsg = '';if (next.msg.includes('连接')) {curMsg = `<div class="center_msg">玩家：${next.name}_${next.msg}</div>`;} else {curMsg = `<div class="msg_line"><div class="avatar">${next.name}</div><div class="msg_text">${next.msg}</div></div>`;}return cur += curMsg;}, '');$('#msgList').html(str);// 获取设置了滚动属性的div标签const div = document.getElementById('msgList');// 设置滚动的顶点坐标为滚动的总高度div.scrollTop = div.scrollHeight;}}// 监听发送按钮$('#btn').on('click', sendMessage);// 输入框回车事件$('.pushMsg').keydown(function(event) {if (event.key === 'Enter') {sendMessage();}});// 发送消息function sendMessage() {const msg = $('.pushMsg').val();if (msg) {newWebSocket.send(`${msg}`);$('.pushMsg').val('');}}</script></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/345852.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【debug】vscode配置c/c++环境及查看调试信息m1 mac

【debug】vscode配置c/c++环境及查看调试信息m1 mac

之前用的一直是clion 但是经过反复调整&#xff0c;发现始终查看不了vector里面的数值&#xff08;只有指针地址&#xff09;&#xff0c;改用常用的vscode后调试成功 安装 安装vscode 以及vscode中的扩展安装 c/c,c/c extension pack,cmake,cmake tools,code runner,codeLLD…
阅读更多...
HarmonyOS（二十三）——HTTP请求实战一个可切换的头条列表

HarmonyOS（二十三）——HTTP请求实战一个可切换的头条列表

在前一篇文章&#xff0c;我们已经知道如何实现一个http请求的完整流程&#xff0c;今天就用官方列子实战一个简单的新闻列表。进一步掌握ArkTS的声明式开发范式&#xff0c;数据请求&#xff0c;常用系统组件以及touch事件的使用。 主要包含以下功能&#xff1a; 数据请求。…
阅读更多...
盘点2024年5月Sui生态发展，了解Sui近期成长历程！

盘点2024年5月Sui生态发展，了解Sui近期成长历程！

2024年5月是Sui的第一个生日月&#xff0c;Sui迎来了它的上线一周年纪念日。在过去的一年中Sui在技术进步与创新、生态系统的扩展、社区发展与合作伙伴关系以及重大项目和应用推出方面取得重要进展&#xff0c;展示了其作为下一代区块链平台的潜力。 以下是Sui的近期成长历程集…
阅读更多...
MySQL的group by与count(), *字段使用问题

MySQL的group by与count(), *字段使用问题

文章目录 问题group by到底做了什么举个例子简单来说为什么select字段&#xff0c;count()不能和*共同使用总结 问题 这是一段摘抄自MySQL官网的文字。其大致意思是MySQL拓展了group by的使用&#xff0c;MySQL允许选择没有出现在group by中的字段。换句话说&#xff0c;标准SQ…
阅读更多...
暴雨推出X705显示器：23.8英寸100Hz IPS屏

暴雨推出X705显示器：23.8英寸100Hz IPS屏

IT资讯 6月 7 日消息&#xff0c;日前&#xff0c;暴雨发布了一款 23.8 英寸 IPS 显示器&#xff0c;直屏、支持 100Hz 刷新率。 据官方介绍&#xff0c;X705 显示器分辨率为 19201080&#xff0c;亮度为 300 尼特&#xff08;典型值&#xff09;&#xff0c;对比度 1000:1&…
阅读更多...
Polar Web【中等】search

Polar Web【中等】search

Polar Web【中等】search Contents Polar Web【中等】search思路&探索首页一般注入方式 EXP&效果Payload 总结 思路&探索 见到题目标题&#xff0c;预测可能有目录扫描或者输入框查询数据之类情况&#xff0c;具体细节在破解过程中才能清楚 打开站点&#xff0c;显…
阅读更多...
【学习笔记】finalshell上传文件夹、上传文件失败或速度为0

【学习笔记】finalshell上传文件夹、上传文件失败或速度为0

出现标题所述的情况&#xff0c;大概率是finalshell上传文件的过程中的权限不够。 可参照&#xff1a;Finalshell上传文件失败或者进度总为百分之零解决方法 如果不成功&#xff0c;建议关闭客户端重试。 同时建议在设置finalshell的ssh连接时根据不同用户设置多个连接&#xf…
阅读更多...
Postman环境变量以及设置token全局变量！

Postman环境变量以及设置token全局变量！

前言百度百科解释&#xff1a; 环境变量&#xff08;environment variables&#xff09;一般是指在操作系统中用来指定操作系统运行环境的一些参数&#xff0c;如&#xff1a;临时文件夹位置和系统文件夹位置等。 环境变量是在操作系统中一个具有特定名字的对象&#xff0c;它…
阅读更多...
UE5中在地形中加入湖、河

UE5中在地形中加入湖、河

系统水资产添加 前提步骤123 完成 前提 使用版本 UE5.0.3,使用插件为UE内置的Water和water Extras. 步骤 1 记得重启 2 增加地形&#xff0c;把<启用编辑图层>勾选 如果地形没有勾选上编辑图层&#xff0c;那么就会导致湖、河等水景象无法融入地形。 如果忘记勾选…
阅读更多...
【NOI】C++程序结构入门之循环结构三——break、continue

【NOI】C++程序结构入门之循环结构三——break、continue

文章目录 前言一、循环的流程控制1.1 导入1.2 循环的打破与跳过1.2.1 break 打破1.2.2 continue 跳过1.2.3 总结 二、例题讲解问题&#xff1a;1468. 小鱼的航程问题&#xff1a;1074 - 小青蛙回来了问题&#xff1a;1261. 韩信点兵问题&#xff1a;1254. 求车速问题&#xff1…
阅读更多...
Linux：冯·诺依曼体系结构和操作系统

Linux：冯·诺依曼体系结构和操作系统

文章目录 冯诺依曼体系结构操作系统概念操作系统的作用定位机制操作系统如何管理硬件 冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系。 截至目前&#xff0c;我们所认识的计算机&…
阅读更多...
记录一次被谷歌封号后又解封的过程

记录一次被谷歌封号后又解封的过程

先提前恭祝2024年所有参加高考的学子们都能金榜题名&#xff0c;会的全对&#xff0c;不会的蒙的全对&#xff01; 一、背景 众所周知&#xff0c;谷歌、ios应用市场对app的审查都是极其严格的&#xff0c;开发者稍有不慎就会被谷歌下架应用&#xff0c;乃至封号。我们公司是做…
阅读更多...
mobaxterm怎么ssh连接

mobaxterm怎么ssh连接

要使用 MobaXterm 进行 SSH 连接&#xff0c;请按照以下步骤操作&#xff1a; 1、首先&#xff0c;确保已经安装了 MobaXterm 软件。 你可以在官方网站&#xff08;https://mobaxterm.mobatek.net/&#xff09;上下载并安装它。 2、打开 MobaXterm 软件后&#xff0c;你会看…
阅读更多...
《大道平渊》· 拾壹 —— 商业一定是个故事：讲好故事，员工奋发，顾客买单。

《大道平渊》· 拾壹 —— 商业一定是个故事：讲好故事，员工奋发，顾客买单。

《大道平渊》 拾壹 "大家都在喝&#xff0c;你喝不喝&#xff1f;" 商业一定是个故事&#xff0c;人民群众需要故事。 比如可口可乐的各种故事。 可口可乐公司也只是被营销大师们&#xff0c; 作为一种故事载体&#xff0c;发挥他们的本领。 营销大师们开发故事…
阅读更多...
杨校老师项目之基于SpringBoot的理发店的预约管理系统

杨校老师项目之基于SpringBoot的理发店的预约管理系统

原系统是SSMJSP页面构成&#xff0c;先被修改为SpringBoot JSP页面 自助下载渠道: https://download.csdn.net/download/kese7952/89417001&#xff0c;或 点我下载 理发师信息&#xff1a; 理发师详细信息 公告信息 员工登录&#xff1a; 管理员登录
阅读更多...
Mysql8安装教程与配置(超详细图文)

Mysql8安装教程与配置(超详细图文)

MySQL 8.0 是 MySQL 数据库的一个重大更新版本&#xff0c;它引入了许多新特性和改进&#xff0c;旨在提高性能、安全性和易用性。 1.下载MySQL 安装包 注&#xff1a;本文使用的是压缩版进行安装。 &#xff08;1&#xff09;从网盘下载安装文件 点击此处直接下载 &#…
阅读更多...
CSS学习|css三种导入方式、基本选择器、层次选择器、结构伪类选择器、属性选择器、字体样式、文本样式

CSS学习|css三种导入方式、基本选择器、层次选择器、结构伪类选择器、属性选择器、字体样式、文本样式

第一个css程序 css程序都是在style标签中书写 打开该网页&#xff0c;可以看到h1标签中的我是标题被渲染成了红色 可以在同级目录下创建一个css目录&#xff0c;专门存放css文件&#xff0c;可以和html分开编写 然后在html页面中&#xff0c;利用link标签以及css文件地址&…
阅读更多...
2024年6月8日 (周六) 叶子游戏新闻

2024年6月8日 (周六) 叶子游戏新闻

万能嗅探: 实测 网页打开 某视频号、某音、某红薯、某站&#xff0c;可以做到无水印的视频和封面下载功能哦&#xff0c;具体玩法大家自行发挥吧。 《丝之歌》粉丝又要失望&#xff1a;大概率不会亮相Xbox发布会即将于后天举行的 Xbox 发布会预计将会有许多令人兴奋的消息。早些…
阅读更多...
使用Ollama+OpenWebUI部署和使用Phi-3微软AI大模型完整指南

使用Ollama+OpenWebUI部署和使用Phi-3微软AI大模型完整指南

&#x1f3e1;作者主页&#xff1a; 点击&#xff01; &#x1f916;AI大模型部署与应用专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年6月6日23点50分 &#x1f004;️文章质量&#xff1a;96分 欢迎来到Phi-3模型的奇妙世界&#xff01;Phi-3是由微软…
阅读更多...
Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios

Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios

什么是Vue? Vue 是一套前端框架&#xff0c;免除原生JavaScript中的DOM操作&#xff0c;简化书写 基于MVVM(Model-View-ViewModel)思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/ Vue快速入门 打开页面&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023