本文转载自微信公众号「勾勾的对W但又前端世界」，作者xilingls。完全转载本文请联系勾勾的不懂前端世界公众号。
回忆以下上一篇内容：《有了 HTTP 协议，想搞行为什么还需要 Websocket?个聊》，了解一下 Websocket 的天室特点和通信原理，我们接着来看 Websocket 服务端与客户端实现。对W但又
经过前面对通信过程的完全梳理，我们将 WebSocket 通信的不懂基本机制已经说的差不多了，为了方便你快速进入实战阶段，想搞行我们暂时放弃纯手写实现，个聊直接选择使用老牌的天室 WebSocket 库: WebSocket-Nodehttps://github.com/theturtle32/WebSocket-Node
简单介绍一下 WebSocket-Node，它有多老牌呢?对W但又
NPM 的包名字就是直接使用的 “WebSocket”。曾经，完全我们西岭老湿看到之后就给出了两个字的不懂评价：“猖狂”。
这个库完全使用 JavaScript 实现，包含了客户端及服务端的实例。其中，客户端包含了 Node 和 浏览器 两个运行环境的代码，除了支持我们前面提到的 Websocket 协议的云南idc服务商 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.length;i++){ conArr[i].send(msg.utf8Data) } }) }) // 据说，长得好看的都会看注释过多的描述，就不写了，据说，长得好看的都会看代码注释(●?●)
运行代码文件后，不出意外的情况下，命令行进程会被占用，监听端口也会被占用，证明服务端运行成功。如果两个都没被占用，想啥呢?失败了呀宝子……
如果服务器启动成功，我怎么用客户端建立链接查看呢?有一款 Websocket 客户端工具叫 WebsocketMan，如果感兴趣，你可以下载来试试。
但是像我这样的香港云服务器帅哥，一般都是自己写客户端：)
Websocket 的客户端并没有什么技术难点，就是浏览器 API 调用。只要你把通信机制够清楚，这玩意就没有不会，因为非常简单，我们直接选择纯手写就可以了，如果你想使用 Websocket-Node 客户端，确实还会更简单。
当然，在写之前，还是要去看看手册的，要不然你怎么知道有哪些 API 呢?
来，手册地址给你：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
你先看着，我就不客气，直接开干……
<body> <div id="msg"></div> <input type="text" id="text"> <input type="button" value="发送" onclick="send()"> <script> //调用websocket对象建立连接： //参数：ws/wss(加密)://ip:port （字符串） var websocket = new WebSocket(ws://127.0.0.1:8080) // console.log(websocket.readyState) // 0 // readyState // 0 链接还没有建立（正在建立链接） // 1 链接建立成 // 2 链接正在关闭 // 3 链接已经关闭 // 监听链接开启事件 websocket.onopen = function () { console.log(websocket.readyState) } // 绑定按钮点击事件 function send() { var text = document.getElementById(text).value // ws 消息发送 websocket.send(text) } // 监听服务端消息推送事件 websocket.onmessage = function (back) { console.log(back.data) } // 监听连接错误信息 // websocket.onerror = function (evt, e) { // console.log(Error occured: + evt.data); // }; //监听连接关闭 // websocket.onclose = function (evt) { // console.log("Disconnected"); // }; </script> </body>过多的描述，就不写了，据说，长得好看的都会看代码注释(●?●)
至此，一个完整的 websocket 通信已经建立完成并能够进行双向通信了。
Websocket-Node 确实很好用，但是功能也确实比较单一了，需要你对 WebSocket 机制有一定的理解之后，b2b供应网才能实现相应的能力。如果，我对 websocket 完全不懂，但又想搞个聊天室，能不能行?
指!定!能!行!
一个目前最为强大且好用的，基本屏蔽了 websocket 概念的 websocket 库。你几乎不用掌握 websocket 相关的知识，只需要按照 Socket.IO 中提供的 API 就能够很好的实现一个 websocket 通信。
注意：程序员要“除机心”。
在不了解 Websocket 时，学习 Websocket 中，强烈不建议使用。 在生产环境下，强烈建议使用。没什么可解释的，就直接按照 Socket.IO 的 API 写就完事了。
吾闻之吾师，有机械者必有机事，有机事者必有机心。机心存於胸中,则纯白不备。
-- 《庄子·天地》
参考资料：
《HTML5 WebSocket权威指南》 机械工业出版社 2014 年 3 月第 1 版 http://www.ruanyifeng.com/blog/2017/05/websocket.html https://www.cnblogs.com/hustskyking/p/websocket-with-node.html https://www.cnblogs.com/jingmoxukong/p/7755643.html https://zhuanlan.zhihu.com/p/23467317 https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket库：
https://socket.io/docs/ https://github.com/theturtle32/WebSocket-Node(责任编辑：数据库)
