❤️一个聊天室案例带你了解Node.js+ws模块是如何实现websocket通信的!

简介: ❤️一个聊天室案例带你了解Node.js+ws模块是如何实现websocket通信的!

🔥 1、前言

大家好,我是纸飞机。倘若每天都是无尽的知识点,那这样的学习想必会很枯燥无味吧。今天就给大家带来个比较有成就感的玩意:Node.js+ws模块来制作一个简易聊天室!文末有代码地址。


image.png

看了效果,好奇实现方式吗? 接下来就为您一一讲解:

🔥 2、项目结构分析

20210912135400383.png

项目目录拆解:

  1. client文件夹:客户端配置
  2. server.js:给客户端的静态服务器
  3. WebSocketServer.js:服务端配置文件

整体结构有了,接下来,嘿嘿。

48bf6c83c237b988ca1c64fe334c743a.gif

🔥 3、操作步骤

准备:

package.json需要执行以下命令才能得到:

npm init -y


需要两个依赖包:

1. npm install ws --save-dev
2. npm install express --save-dev

步骤1:服务端构建(WebSocketServer.js)

const webSocket = require("ws"); //引入ws服务器模块
const ws = new webSocket.Server({ port: 8000 }); //创建服务器,端口为8000
let clients = {};
let clientNum = 0;
ws.on("connection", (client) => {
  //连接客户端
  //给客户端编号,也就是参与聊天的用户
  client.name = ++clientNum;
  clients[client.name] = client;
  // 用户的聊天信息
  client.on("message", (msg) => {
    console.log("用户" + client.name + "说:" + msg);
    //广播数据发送输出
    broadcast(client, msg);
  });
  //报错信息
  client.on("error", (err) => {
    if (err) {
      console.log(err);
    }
  });
  // 下线
  client.on("close", () => {
    delete clients[client.name];
    console.log("用户" + client.name + "下线了~~");
  });
});
//广播方法
function broadcast(client, msg) {
  for (var key in clients) {
    clients[key].send("用户" + client.name + "说:" + msg);
  }
}

步骤2:客户端静态服务器构建(server.js)

const express = require("express"); //引入express模块
const path = require("path"); //引入磁盘路径模块
const app = express();
const port = 3000; //端口
const host = "127.0.0.1"; //主机
app.use(express.static(path.resolve(__dirname, "./client"))); //设置要开启服务的路径
app.listen(port, host, () => {
  //监听服务
  console.log(`客户端服务器为:http://${host}:${port}`);
});

步骤3:客户端页面构建(index.html)

<!DOCTYPE html>
<html lang="en">
<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>客户端</title>
</head>
<body>
    <h1>聊天室</h1>
    <div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
    <br />
    <div>
        <input type="text" id="msg" style="width: 200px;">
    </div>
    <button id="submit">提交</button>
    <script src="WSClient.js" charset="utf-8"></script>
    <script>
        document.querySelector('#submit').addEventListener('click', function () {
            var msg2 = msg.value
            ws.send(msg2)
            msg.value = ''
        }, false)
    </script>
</body>
</html>


步骤4:客户端连接到服务端配置(WSClient.js)


const ws = new WebSocket("ws://127.0.0.1:8000"); //连接到客户端
//上线
ws.onopen = () => {
  ws.send("我上线啦");
};
//发送信息
ws.onmessage = (msg) => {
  const content = document.getElementById("content");
  content.innerHTML += msg.data + "<br>";
};
//报错
ws.onerror = (err) => {
  console.log(err);
};
//下线
ws.onclose = () => {
  console.log("close");
};

到这里就已经完成。

步骤5:分别启动 WebSocketServer.js ,server.js

node WebSocketServer.js

2021091214181267.png

node server.js

20210912141906191.png

以上就代表启动成功。 接下来我们本地测试下,想线上玩的同学也可以自行上传玩玩。

🔥 4、查看效果

用俩浏览器打开localhost:3000即可查看效果:

image.png

代码下载地址https://codechina.csdn.net/qq_32442973/websocket.git

小提问:websocket断开该怎么办呢(心跳)?(后面会出文章)




目录
相关文章
|
5月前
|
JavaScript 前端开发
在Node.js中,如何合理使用模块来避免全局变量的问题?
在Node.js中,如何合理使用模块来避免全局变量的问题?
209 71
|
3月前
|
存储 消息中间件 NoSQL
体育赛事直播系统中基于 WebSocket 实现的聊天室与弹幕模块设计与实践
本文详解东莞梦幻网络科技体育直播系统中「聊天室+弹幕」模块的实时通信技术实现,涵盖 WebSocket 架构、连接池管理、多房间逻辑、消息转发与并发控制等核心要点,助力构建高并发、低延迟的直播互动体验。
|
3月前
|
运维 Kubernetes API
解决Kubernetes集群中master节点无法与node节点通信的策略。
这些策略不仅需要执行命令来获取信息,更要深入理解集群组件如何交互,以便进行准确的故障定位与修复。一条一条地排查,并适时回顾配置文件,证书有效性等,通常可以找到问题所在。给出的命令需要根据具体环境的配置进行适当的修改。故障排除往往是一个细致且需求反复验证的过程,但遵循上述策略可以高效定位大部分通信故障的原因。
268 12
|
3月前
|
Kubernetes 网络协议 API
在k8s集群中解决master节点与node通信问题
整个排查和解决流程需要综合应用以上方法,以及根据具体情况调整排查顺序或应用其他技术细节。为保证解决方案的实用性和有效性,还需紧跟Kubernetes社区的最新动态和最佳实践。在实际操作过程中,应记录所采取的步骤和观察到的系统响应,以便在遇到类似问题时能够快速定位和解决。
320 8
|
5月前
|
JavaScript 前端开发 开发者
Node学习笔记:HTTP模块
总的来说,Node.js的HTTP模块是一个强大的工具,可以帮助你处理HTTP协议的各种需求。无论你是想开设自己的餐厅(创建服务器),还是想去别的餐厅点菜(发出请求),HTTP模块都能满足你的需求。
147 18
|
7月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
8月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
230 16
|
7月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
672 0
|
JavaScript 前端开发 网络协议
Vue.js 与 WebSocket 的惊世联姻!实时数据通信的震撼变革,你敢错过?
【8月更文挑战第30天】在现代Web开发中,实时数据通信至关重要。Vue.js作为流行前端框架,结合WebSocket技术,实现了高效实时的数据交互。本文简要介绍了WebSocket原理及其在Vue.js项目中的应用方法,包括建立连接、监听事件及数据处理等步骤,展示了如何利用二者结合轻松应对实时聊天、股票更新等多种场景,为开发者提供了实用指南。希望本文能帮助您更高效地实现Web应用的实时通信功能。
416 0