正文

❤️一个聊天室案例带你了解node.js+ws模块是如何实现websocket通信的！(代码片段)

前端纸飞机  前端纸飞机  2023-01-02  451

关键词：

文章目录

🔥 1、前言

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

看了效果，好奇实现方式吗？接下来就为您一一讲解：

🔥 2、项目结构分析

项目目录拆解：

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

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

🔥 3、操作步骤

准备：

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

npm init -y

需要两个依赖包：

npm install ws --save-dev
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

node server.js

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

🔥 4、查看效果

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

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

小提问：websocket断开该怎么办呢（心跳）？（后面会出文章）

🔥 5、往期好文推荐

npm install下来的包到底怎么来的？难怪npmjs上会有这么的库！手把手教你做一个完全属于你自己的npm组件库！
怎么微信WeixinJSBridge.invoke支付成功居然不跳转？还把我页面给关了！这篇文章就告诉你What should I do！
一起谈一谈js中的宏任务和微任务！
2021前端面试js题目总结，不妨看看有没有属于你的那道题
前端异步解决方案大全最新版(2021版)_纸飞机博客
使用Docker部署前端项目实战教程，该踩的坑我都帮你踩了！_纸飞机博客-CSDN博客

带你了解node.js包管理工具：包与npm(代码片段)

摘要：包与NPMNode组织了自身的核心模块，也使得第三方文件模块可以有序的编写和使用。本文分享自华为云社区《NodeJs深入浅出之旅：包与NPM》，作者：空城机。包与NPMNode组织了自身的核心模块，也使得... 查看详情

ws模块指南+vue在线聊天室(代码片段)

...续连接的特性使得WebScoket特别适合用于适合用于游戏或者聊天室等使用场景.ws模块相较于其他基于WebSocket协议的模块来说非常的纯粹.他只关注基于WebSocket协议的实现,其他例如Socket.io提供了回退手段,当WebSocket无法使用的时候会利... 查看详情

五个最佳案例带你解读node.js的前后之道

...而成，浏览器内核V8做为执行引擎；Node不是JS应用、而是一个Javascript的运行环境。Node保留了前端浏览器js的接口，没有改写语言本身的任何特性，依旧基于作用域和原型链。Node.js是一个为实时Web（Real-timeWeb）应用开发而诞生的... 查看详情

如何系统地学习node.js？

...事情：搭建一个微博网站搭建一个博客网站搭建一个在线聊天室写一个简单的爬虫调用一些网站的API做一些好玩的东西等等但是，查看详情

Node JS - 你如何判断一个套接字是不是已经使用 Einaros WS 套接字模块打开？

】NodeJS-你如何判断一个套接字是不是已经使用EinarosWS套接字模块打开？【英文标题】：NodeJS-HowCanYouTellIfASocketIsAlreadyOpenWithTheEinarosWSSocketModule?NodeJS-你如何判断一个套接字是否已经使用EinarosWS套接字模块打开？【发布时间】：2014-... 查看详情

一短文带你快速入门node.js基础及内置模块(代码片段)

1.什么是Node.jsNode.js是一个开源与跨平台的JavaScript运行时环境。与2009年发布。它是在浏览器外运行，它是一个事件驱动异步I/O单进程的服务端JS环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常... 查看详情

一段文快速带你入门node.js和第三方模块(代码片段)

...e.js基础和内置模块具体内容可以见上期文档：一段文带你快速入门Node.js和内置模块（一）Node.js的第三方模块npm下载工具就是网上别人已经开发好的模块，我们可以直接拿来借鉴使用，但是需要下载，下载... 查看详情

esp保姆级教程疯狂毕设篇——案例：基于阿里云小程序arduino的ws2812灯控系统

忘记过去，超越自己❤️博客主页单片机菜鸟哥，一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2022-06-15❤️❤️本篇更新记录2022-06-15❤️ 查看详情

带你入门nodejs第一天——node基础语法及使用(代码片段)

带你入门nodejs第一天——node基础语法及使用带你入门nodejs第二天——http模块化npmyarm带你入门nodejs第三天—express路由带你学习nodejs第四天——身份认证及缓存1node概述为什么要学习node.js为什么要学习服务端的开发？通过学习... 查看详情

带你入门nodejs第一天——node基础语法及使用(代码片段)

...什么node.js，也叫作node，或者nodejs，指的都是一个东西。node.js官方网站node.js中文网node.js中文社区Node.js是一个基于ChromeV8引擎的JavaScript运行环境，nodejs允许javascript代码运行在服务端1.nodejs不是一门新的编程语言& 查看详情

从node.js模块化开发来了解javascript闭包

...峰的网站node.js教程。　　直接上代码：我们首先编写了一个hello.js文件，这个hello.js文件就是一个查看详情

esp保姆级教程疯狂node.js服务器篇——案例：esp8266+环境监测+本地部署mqtt服务器+文件存储数据+钉钉/微信/飞书报警

忘记过去，超越自己❤️博客主页单片机菜鸟哥，一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2022-09-05❤️❤️本篇更新记录2022-09-05❤️ 查看详情

esp保姆级教程疯狂node.js服务器篇——案例：esp8266+环境监测+echartweb可视化界面+nodejs本地服务+钉钉/微信/飞书报警

忘记过去，超越自己❤️博客主页单片机菜鸟哥，一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2022-08-09❤️❤️本篇更新记录2022-08-09❤️ 查看详情

esp保姆级教程疯狂node.js服务器篇——案例：esp8266+环境监测+本地部署mqtt服务器+文件存储数据+钉钉/微信/飞书报警

esp保姆级教程预告疯狂node.js服务器篇——案例：esp8266+mq系列+nodejs本地服务+mysql存储(代码片段)

...记过去，超越自己❤️博客主页单片机菜鸟哥，一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2022-06-30❤️❤️本篇更新记录2022-06-30❤️🎉欢迎关注🔎点赞👍收藏⭐️留言📝🙏此博客均由博主... 查看详情

esp保姆级教程预告疯狂node.js服务器篇——案例：esp8266+mq系列+nodejs本地服务+文件存储数据(代码片段)

esp保姆级教程预告疯狂node.js服务器篇——案例：esp8266+dht11+nodejs本地服务+文件存储数据(代码片段)

esp保姆级教程疯狂node.js服务器篇——案例：esp8266+rfid-rc522射频+刷入用户名字+打卡应用+nodejs本地服务+文件存储数据

忘记过去，超越自己❤️博客主页单片机菜鸟哥，一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2022-08-01❤️❤️本篇更新记录2022-08-01❤️ 查看详情