websocket实现聊天室（一）

最新推荐文章于 2024-05-03 22:03:49 发布

ChenyxJS

最新推荐文章于 2024-05-03 22:03:49 发布

阅读量3.7k

点赞数 2

文章标签： websocket html5

本文链接：https://blog.csdn.net/Cd_Air/article/details/120809090

版权

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

初识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));
  });
}