对Websocket完全不懂，但又想搞个聊天室，行吗？

本文转载自微信公众号「勾勾的前端世界」，作者xilingls。转载本文请联系勾勾的前端世界公众号。

创新互联建站专注于巴林右旗网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供巴林右旗营销型网站建设，巴林右旗网站制作、巴林右旗网页设计、巴林右旗网站官网定制、微信小程序服务，打造巴林右旗网络公司原创品牌,更为您提供巴林右旗网站排名全网营销落地服务。

回忆以下上一篇内容：《有了 HTTP 协议，为什么还需要 Websocket?》，了解一下 Websocket 的特点和通信原理，我们接着来看 Websocket 服务端与客户端实现。

Websocket 服务端与客户端实现

经过前面对通信过程的梳理，我们将 WebSocket 通信的基本机制已经说的差不多了，为了方便你快速进入实战阶段，我们暂时放弃纯手写实现，直接选择使用老牌的 WebSocket 库: WebSocket-Nodehttps://github.com/theturtle32/WebSocket-Node

简单介绍一下 WebSocket-Node，它有多老牌呢?

NPM 的包名字就是直接使用的 “WebSocket”。曾经，我们西岭老湿看到之后就给出了两个字的评价：“猖狂”。

这个库完全使用 JavaScript 实现，包含了客户端及服务端的实例。其中，客户端包含了 Node 和 浏览器 两个运行环境的代码，除了支持我们前面提到的 Websocket 协议的 13 版本，它同时还支持 Websocket 协议 8 这个老版本，实属优秀。

接下来，我们就来看看，如何借助 Websocket-Node 实现一个 Websocket 服务。

服务端

安装 npm install websocket 后，创建服务器运行文件 ws-server.js ，代码如下，请认真阅读代码及注释：

 
 
 
 

  
  
  
  
// === 作为帅哥，一定要加注释 ===
  
  
  
  
var Websocket = require('websocket').server
  
  
  
  
var http = require('http')
  
  
  
  

  
  
  
  
// 创建 HTTP 服务，作为第一次握手链接使用
  
  
  
  
var httpServer = http.createServer().listen(8080,function(){
  
  
  
  
  console.log('http://127.0.0.1:8080')
  
  
  
  
})
  
  
  
  

  
  
  
  
// 创建 websocket 服务实力
  
  
  
  
var wsServer = new Websocket({
  
  
  
  
  // 配置依赖的握手 http 服务器
  
  
  
  
  httpServer:httpServer,
  
  
  
  

  
  
  
  
  autoAcceptConnections:false
  
  
  
  
})
  
  
  
  

  
  
  
  
// 保存链接池
  
  
  
  
var conArr = []
  
  
  
  

  
  
  
  
// 监听 ws 请求事件
  
  
  
  
wsServer.on('request',function(request){
  
  
  
  
  // 获取链接示例
  
  
  
  
  var connection = request.accept()
  
  
  
  
  // 保存连接池
  
  
  
  
  conArr.push(connection)
  
  
  
  
  // 监听消息事件
  
  
  
  
  connection.on('message',function(msg){
  
  
  
  
    console.log(msg)
  
  
  
  
    // 循环连接池，推送广播消息至客户端
  
  
  
  
    for(let i = 0;i
  
  
  
  
      conArr[i].send(msg.utf8Data)
  
  
  
  
    }
  
  
  
  
  })
  
  
  
  
})
  
  
  
  

  
  
  
  
// 据说，长得好看的都会看注释
 
 
 
 

过多的描述，就不写了，据说，长得好看的都会看代码注释(●'?'●)

运行代码文件后，不出意外的情况下，命令行进程会被占用，监听端口也会被占用，证明服务端运行成功。如果两个都没被占用，想啥呢?失败了呀宝子……

如果服务器启动成功，我怎么用客户端建立链接查看呢?有一款 Websocket 客户端工具叫 WebsocketMan，如果感兴趣，你可以下载来试试。

但是像我这样的帅哥，一般都是自己写客户端：)

客户端

Websocket 的客户端并没有什么技术难点，就是浏览器 API 调用。只要你把通信机制够清楚，这玩意就没有不会，因为非常简单，我们直接选择纯手写就可以了，如果你想使用 Websocket-Node 客户端，确实还会更简单。

当然，在写之前，还是要去看看手册的，要不然你怎么知道有哪些 API 呢?

来，手册地址给你：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

你先看着，我就不客气，直接开干……