【无标题】

公众号：全干开发 专注分享简洁但高质量的动图技术文章！

简介

最近公司…算了，不想编故事。本教程将使用WebSocke极速实现一个在线聊天室！

项目搭建

实现一个在线聊天室，必须有一个服务端node和客户端html，他们首先要具备相互连接功能！

连接功能

服务端代码实现

首先，创建文件目录，如websocket，然后初始化仓库，并安装websocket依赖

npm init - y
npm i ws
1
2

依赖安装完毕后，我们在项目根目录创建一个server.js文件，写入服务端逻辑

const WebSocket = require("ws")

const wss = new WebSocket.Server({port:3000})

console.log("服务运行在localhost:30000");

wss.on("connection",ws =>{
  console.log("[服务器]：客官您来了~里边请");

  ws.on("close",()=>{
    console.log("[服务器]：客官下次再来呢~");
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13

上述代码使用Node.js的"ws"库创建了一个WebSocket服务器。变量wss用于表示这个WebSocket服务器，每当有新的连接时，wss.on(“connection”,ws => {…})就会被调用；当连接关闭时，ws.on(“close”,() => {…})就会被调用。

现在，我们运行这个后端服务（控制台输入node sever.js）

前端代码实现

服务端代码实现后，我们必须写点前端代码，才能实现websocket信息交互。项目的根目录创建index.html，写入逻辑：

DOCTYPE html>
<html lang="en">
  <head>
    <title>title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
  head>
  <body>
    <script>
      // 创建WebSocket对象，并尝试连接到ws://localhost:3000
      const ws = new WebSocket("ws://localhost:3000")
      // WebSocket连接成功建立时，就会触发"open"事件。
      ws.addEventListener("open",()=>{
        console.log("连接服务器去喽~");
      })
    script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

现在，我们使用VScode Opne with live sever运行这个index.heml。此时，ws连接就成功了，服务端代码就会打印消息。

我们关闭网页的时候，服务端也会做出响应

信息交互

现在，我们要实现客户端与服务端的数据交互。首先，我们需要写一个input输入框和一个数据提交按钮。点击提交时，我们通过ws对象的send方法向服务端发送数据。然后通过监听服务端的message事件处理响应的数据。

DOCTYPE html>
<html lang="en">
  <head>
    <title>title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="css/style.css" rel="stylesheet" />
  head>
  <body>
    <script>
      // 创建WebSocket对象，并尝试连接到ws://localhost:3000
      const ws = new WebSocket("ws://localhost:3000");
      let messageHtml = "";

      // WebSocket连接成功建立时，就会触发"open"事件。
      ws.addEventListener("open", () => {
        console.log("连接服务器去喽~");
      });
      
      // 监听服务端响应
      ws.addEventListener("message", ({ data }) => {
        messageHtml += `${data} [服务端]`;
        let dom = document.getElementById("messageList");
        // 将服务器返回的数据渲染在页面
        dom.innerHTML = messageHtml;
      });

      function sendMessage() {
        let message = document.getElementById("myInput");
        // 发送数据给服务器
        ws.send("[客户端]：" + message.value);
        // 将客户端的数据渲染在页面
        messageHtml += "[客户端]：" + message.value;
        // 清空input的内容，方便下一次输入
        message.value = "";
      }
    script>
    <div>
      <input type="text" id="myInput" />
      <button onclick="sendMessage()">发送button>
      <div id="messageList">div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

最后，我们还需要在服务端server.js接收数据，并根据数据内容做出一些不同的响应

const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 3000 });

console.log("服务运行在localhost:30000");

wss.on("connection", (ws) => {
  console.log("[服务器]：客官您来了~里边请");

  // 接收客户端的数据，并做出回应
  ws.on("message", (data) => {
    // 客户端发送来的数据
    let message = String(data);
    // 根据关键词做出响应
    if (message.includes("1")) {
      ws.send("您好，我是AI机器人");
    } else if (message.includes("2")) {
      ws.send("我不明白您的意思");
    } else {
      ws.send("??");
    }
  });

  ws.on("close", () => {
    console.log("[服务器]：客官下次再来呢~");
  });

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

最后，我们重启服务端代码，刷新页面就可以了！

至此，我们的线上聊天室（人工智障）就完成了！**

相关阅读:
【C进阶】之联合体与共用体和枚举
 HCI OPCDE
yolov5数据集
 PHP学习笔记（观隅反三）
springboot+mybatis实现一对多查询（某学生和课程的ER图如下图所示，根据ER图创建数据库表，往数据库表中添加若干测试数据，用SpringBoot+SpringMVC+ Mybatis）
vue3使用element plus的时候组件显示的是英文
 电商秒杀解决方案
 Java集合——Set接口
 关于汽车html网页设计完整版,10个以汽车为主题的网页设计与实现
 C++面试题其一
原文地址：https://blog.csdn.net/weixin_46769087/article/details/134435529