我用WebSocket极速搭建了一个在线聊天室!

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

简介

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

项目搭建

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

连接功能

服务端代码实现

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

csharp 复制代码
npm init - y
npm i ws

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

javascript 复制代码
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,写入逻辑:

xml 复制代码
<!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事件处理响应的数据。

xml 复制代码
<!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接收数据,并根据数据内容做出一些不同的响应

javascript 复制代码
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("[服务器]:客官下次再来呢~");
  });

});

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

至此,我们的线上聊天室(人工智障)就完成了!**

相关推荐
yashunan7 分钟前
Web_php_unserialize
android·前端·php
m0_zj15 分钟前
17.[前端开发]Day17-形变-动画-vertical-align
前端·css·chrome·html·html5
Edward-tan44 分钟前
【玩转全栈】--创建一个自己的vue项目
前端·javascript·vue.js
青年夏日科技工作者1 小时前
虚幻浏览器插件 UE与JS通信
前端·javascript·html
雷神乐乐2 小时前
创建前端项目的方法
前端·javascript·vue.js
prince_zxill2 小时前
JavaScript面向对象编程:Prototype与Class的对比详解
前端·javascript·ecmascript·原型模式
D.eL2 小时前
Vue 2 项目中 Mock.js 的完整集成与使用教程
前端·javascript·vue.js
brzhang3 小时前
墙裂推荐一个在 Apple Silicon 上创建和管理虚拟机的轻量级开源工具:lume
前端·后端
Along丶WG3 小时前
解决国内服务器 npm install 卡住的问题
前端·npm·node.js
prince_zxill4 小时前
Node.js 和 npm 安装教程
前端·javascript·vue.js·npm·node.js