❤Nodejs 第十五章(简单websocket聊天实现)

❤Nodejs 第十五章(简单websocket聊天实现)

websocket 聊天也是我们经常会用到的一个功能,接下来我们就简单的搭建一个聊天室的客户端以及服务器端,然后对于websocket聊天功能做一个简单的分析!接下来,就我们正常的websocket分别进行一个简单的实现。

1、websocket服务器端的实现

(1)新建一个空文件夹wsyarn

js 复制代码
wsyarn

(2)初始化

js 复制代码
yarn init

(3)安装需要的依赖包

js 复制代码
yarn add ws --save-dev
yarn add express --save-dev

(4)新建WebSocketServer.js,构建服务端(WebSocketServer.js)

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,这个主要是用来给客服端进行访问使用

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,来简单测试一下我们的聊天功能!

js 复制代码
<!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>
        document.querySelector('#submit').addEventListener('click', function () {
            var msg2 = msg.value
            ws.send(msg2)
            msg.value = ''
        }, false);


        // 客户端连接到服务端配置
        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");
        };

    </script>
</body>

</html>

4、启动

(1)启动 WebSocketServer.js ,server.js

js 复制代码
node WebSocketServer.js
node server.js

(2)拿俩浏览器打开打开index.html 浏览

可以看到我们的页面跟下面的页面差不多,简单的发送消息以后会发现,已经实现聊天OK!

5、在项目之中实现websocket(基于Node20+Vite)

1、安装

js 复制代码
yarn add ws

2、导入相关的模块

js 复制代码
// 本地websocket连接
import WebSocket  from "ws";
// import http  from "http";

3、创建ws通信

js 复制代码
const wss = new WebSocket.Server({ port: 8888  });

这个时候我们发现报错:

一直提示我们 WebSocket.WebSocketServer is not a constructor

这是怎么回事?

解决Wwebsocket更新报错

这是因为Node.js 的最新版本在WebSocket 处理网络协议如 WebSocket 方面对使用 Node.js 20 + Vite 做了一些更改所以导致了我们上面的报错

从 Node.js 15起,Node.js 让我们使用内置的 httphttps 模块直接支持 WebSocket,而不是依赖第三方库。引入了实验性的 http/websocket 模块来提供原生的 WebSocket 支持(简单总结就是一句话,版本更新了,写法变了

新写法

尝试新的写法方式使用内置的 http/websocket 模块:

javascript 复制代码
import { WebSocketServer } from 'http/websocket';
const wss = new WebSocketServer({ port: 3000 });

wss.on('connection', function connection(ws) {
  ws.on('message', function message(data) {
    console.log('received: %s', data);
  });

  ws.send('something');
});

使用第三方库 ws

引入 ws 库进行更改

javascript 复制代码
yarn add ws
import WebSocket, { WebSocketServer } from 'ws';
const wss = new WebSocketServer({ port: 3000 });

wss.on('connection', function connection(ws) {
  ws.on('message', function message(data, isBinary) {
    const message = isBinary ? data : data.toString();
    console.log('received: %s', message);
  });

  ws.send('Hello!');
});

项目成功启动!

6、结语:

本来我的Node是嵌套在我的Vite+vue3 项目之中的,最后听从了群友的建议,最后还是将前后端(也就是vie+vue3 另外一套是Node+mysql进行了分离,这里希望能看到这里的朋友最好进行分离,因为下面我们丰富的功能还是分开写扩展性会更加的好!)

相关推荐
悟能不能悟14 分钟前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶19 分钟前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
阿里小阿希22 分钟前
Vue3 + Element Plus 项目中日期时间处理的最佳实践与数据库设计规范
数据库·设计规范
白鹭1 小时前
MySQL源码部署(rhel7)
数据库·mysql
666和7772 小时前
Struts2 工作总结
java·数据库
gnip2 小时前
js上下文
前端·javascript
还听珊瑚海吗2 小时前
SpringMVC(一)
数据库
中草药z2 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)2 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js