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

  
    
    
    
    

    
  
  
    
    

    
    
    
    发送

    
  

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

运行

        命令提示符进入到server.js的目录下，node .\server.js，然后打开index.html即可

         这篇只是完成了一个最简单的聊天室功能，聊天历史记录、区分消息类型、定位到最新一条消息、发送图片表情等都没有实现，接下来就是按着微信聊天对功能进行优化。