【无标题】 - 技术栈

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

简介

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

项目搭建

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

连接功能

服务端代码实现

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

复制代码

npm init - y
npm i ws

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

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("[服务器]：客官下次再来呢~");
  })
})

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

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

前端代码实现

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

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>

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

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

信息交互

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

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");
      let messageHtml = "";

      // WebSocket连接成功建立时，就会触发"open"事件。
      ws.addEventListener("open", () => {
        console.log("连接服务器去喽~");
      });
      
      // 监听服务端响应
      ws.addEventListener("message", ({ data }) => {
        messageHtml += `<p style="margin-left:80px">${data} [服务端]</p>`;
        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>

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

html 复制代码

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("[服务器]：客官下次再来呢~");
  });

});

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

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