[系统运维] websocket实现聊天室（一）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 系统运维 -> websocket实现聊天室（一） -> 正文阅读

[系统运维]websocket实现聊天室（一）

????????最近接到一个聊天室的任务，之前在学校完全没有接触过这方面的需求，在网上查找资料后，基本确定了实现方案，现在就开始着手学习，在此记录一下遇到的问题。

初识websocket

??????? 在简单了解websocket后，我觉得与http请求类似，不过websocket可以实现在客服端向服务器发一次请求之后，就会建立一个不会中断的通讯，这样实现聊天室就不需要像http请求那样，你需要隔一段时间就向服务器发一次请求，询问是否有发给我的消息。

H5中使用websocket

??????? H5中提供了websocket的API，我们可以直接使用。

主要就是四部曲:

1、创建websocket（这里有一个问题，我参考资料中websocket服务地址使用的是ws://echo.websocket.org，但我使用的时候报了个错，貌似是被拦截器拦截了，没有找到解决办法，所以直接使用的自己本地创建的websocket的服务地址，本篇后面也会介绍如何创建一个简单的本地的websocket服务）

  // 1、创建websocket
      // 参数：websocket的服务地址
      var socket = new WebSocket("ws://localhost:3000");

2、注册一个open事件，在连接创建时触发的事件

// 2、open：当和websocket的服务器连接成功时触发
      socket.addEventListener("open", () => {
        // 将服务器连接成功的信息打印到div中
        div.innerHTML = "服务器连接成功了！";
      });

3、注册一个send事件，发送数据给服务器

// 3、 send：发送数据给服务器
      button.addEventListener("click", () => {
        // 获取输入框中的数据
        var value = input.value;
        // 调用send方法将数据发送给服务器
        socket.send(value);
      });

4、注册一个message事件，接收服务器数据

// 4、message：接收服务器数据
      socket.addEventListener("message", (e) => {
        // 将接收到的数据显示出来
        div.innerHTML = e.data;
      });

????????这样客户端（浏览器）简单的流程就走完了，接下来就是搭建一个本地的websocket服务。

搭建一个本地的websocket服务

?????????这里我是用的方式是用nodejs-websocket进行搭建，使用说明文档地址：?ddwsnodejs-websocket - npm

按照官方的教程进行搭建就可以。

1、首先我们需要安装nodejs-websocket的依赖

npm install nodejs-websocket

2、创建一个server.js,引入nodejs-websocket包

// 1、 导入nodejs-websocket包
const ws = require("nodejs-WebSocket");

3、创建一个server

// 创建一个server
const server = ws.createServer((conn) => {
    console.log("有用户连接上来了！");
    // 接收到客户端发送的数据时触发
    conn.on("text", (data) => {
      broadcast(data);
    });
    // 连接断开时触发
    conn.on("close", (data) => {
      broadcast(data);
    });
    // 异常时触发
    conn.on("error", (data) => {
      console.log("发生异常！");
    });
  }).listen(PORT, () => {
    console.log("websocket服务器动起来了！监听了端口：" + PORT);
  });

????????这里有一个需要注意的地方，注册close事件时，也需要将error事件注册，因为发生close事件时，会发生异常，若没有注册error事件，服务器就会停止运行。

4、将接收到的数据发送给所有人（广播）

// 广播方法
function broadcast(msg) {
  server.connections.forEach((item) => {
    item.send(JSON.stringify(msg));
  });
}

?这样一个简单的websocket服务器就搭建完成了。

下面把两个完整的代码贴出来

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      div {
        width: 200px;
        height: 400px;
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- 显示内容 -->
    <div></div>
    <!-- 输入内容 -->
    <input type="text" placeholder="请输入要发送的内容" />
    <!-- 发送按钮 -->
    <button>发送</button>

    <script>
      var input = document.querySelector("input");
      var button = document.querySelector("button");
      var div = document.querySelector("div");

      // 1、创建websocket
      // 参数：websocket的服务地址
      var socket = new WebSocket("ws://localhost:3000");
      // 2、open：当和websocket的服务器连接成功时触发
      socket.addEventListener("open", () => {
        div.innerHTML = "服务器连接成功了！";
      });
      // 3、 send：发送数据给服务器
      button.addEventListener("click", () => {
        var value = input.value;
        socket.send(value);
        console.log(value);
      });
      // 4、message：接收服务器数据
      socket.addEventListener("message", (e) => {
        div.innerHTML = JSON.parse(e.data);
      });
    </script>
  </body>
</html>

server.js

// 1、 导入nodejs-websocket包
const ws = require("nodejs-WebSocket");
const PORT = 3000;

let count = 0;
// 创建一个server
const server = ws
  .createServer((conn) => {
    console.log("有用户连接上来了！");
    count++;
    conn.userName = "用户" + count;

    broadcast(conn.userName + "进入了聊天室");

    // 接收到客户端发送的数据时触发
    conn.on("text", (data) => {
      broadcast(data);
    });
    // 连接断开时触发
    conn.on("close", (data) => {
      count--;
      broadcast(data);
    });
    // 异常时触发
    conn.on("error", (data) => {
      console.log("发生异常！");
    });
  })
  .listen(PORT, () => {
    console.log("websocket服务器动起来了！监听了端口：" + PORT);
  });

// 广播方法
function broadcast(msg) {
  server.connections.forEach((item) => {
    item.send(JSON.stringify(msg));
  });
}