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

});

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

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

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站