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

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

本文转载自微信公众号「勾勾的前端世界」,作者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 ,代码如下,请认真阅读代码及注释:

  1. // === 作为帅哥,一定要加注释 === 
  2. var Websocket = require('websocket').server 
  3. var http = require('http'
  4.  
  5. // 创建 HTTP 服务,作为第一次握手链接使用 
  6. var httpServer = http.createServer().listen(8080,function(){ 
  7.   console.log('http://127.0.0.1:8080'
  8. }) 
  9.  
  10. // 创建 websocket 服务实力 
  11. var wsServer = new Websocket({ 
  12.   // 配置依赖的握手 http 服务器 
  13.   httpServer:httpServer, 
  14.  
  15.   autoAcceptConnections:false 
  16. }) 
  17.  
  18. // 保存链接池 
  19. var conArr = [] 
  20.  
  21. // 监听 ws 请求事件 
  22. wsServer.on('request',function(request){ 
  23.   // 获取链接示例 
  24.   var connection = request.accept() 
  25.   // 保存连接池 
  26.   conArr.push(connection
  27.   // 监听消息事件 
  28.   connection.on('message',function(msg){ 
  29.     console.log(msg) 
  30.     // 循环连接池,推送广播消息至客户端 
  31.     for(let i = 0;i<conArr.length;i++){ 
  32.       conArr[i].send(msg.utf8Data) 
  33.     } 
  34.   }) 
  35. }) 
  36.  
  37. // 据说,长得好看的都会看注释 

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

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

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

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

客户端

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

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

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

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

  1. <body> 
  2.   <div id="msg"></div> 
  3.   <input type="text" id="text"
  4.   <input type="button" value="发送" onclick="send()"
  5.  
  6.   <script> 
  7.     //调用websocket对象建立连接: 
  8.     //参数:ws/wss(加密)://ip:port (字符串) 
  9.     var websocket = new WebSocket('ws://127.0.0.1:8080'
  10.     // console.log(websocket.readyState) // 0  
  11.     // readyState  
  12.     // 0 链接还没有建立(正在建立链接) 
  13.     // 1 链接建立成 
  14.     // 2 链接正在关闭 
  15.     // 3 链接已经关闭 
  16.  
  17.     // 监听链接开启事件 
  18.     websocket.onopen = function () { 
  19.       console.log(websocket.readyState) 
  20.     } 
  21.  
  22.     // 绑定按钮点击事件 
  23.     function send() { 
  24.       var text = document.getElementById('text').value 
  25.       // ws 消息发送 
  26.       websocket.send(text) 
  27.     } 
  28.  
  29.     // 监听服务端消息推送事件 
  30.     websocket.onmessage = function (back) { 
  31.       console.log(back.data) 
  32.     } 
  33.  
  34.     // 监听连接错误信息 
  35.     // websocket.onerror = function (evt, e) { 
  36.     //   console.log('Error occured: ' + evt.data); 
  37.     // }; 
  38.  
  39.     //监听连接关闭 
  40.     // websocket.onclose = function (evt) { 
  41.     //   console.log("Disconnected"); 
  42.     // }; 
  43. </script> 
  44.  
  45. </body> 

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

至此,一个完整的 websocket 通信已经建立完成并能够进行双向通信了。

Websocket-Node 确实很好用,但是功能也确实比较单一了,需要你对 WebSocket 机制有一定的理解之后,才能实现相应的能力。如果,我对 websocket 完全不懂,但又想搞个聊天室,能不能行?

指!定!能!行!

Socket.IO

一个目前最为强大且好用的,基本屏蔽了 websocket 概念的 websocket 库。你几乎不用掌握 websocket 相关的知识,只需要按照 Socket.IO 中提供的 API 就能够很好的实现一个 websocket 通信。

注意:程序员要“除机心”。

  • 在不了解 Websocket 时,学习 Websocket 中,强烈不建议使用。
  • 在生产环境下,强烈建议使用。

服务端

  1. const { createServer } = require("http"); 
  2. const { Server } = require("socket.io"); 
  3.  
  4. const httpServer = createServer(); 
  5. const io = new Server(httpServer, { 
  6.   cors: { 
  7.     origin: "*"
  8.     methods: ["GET""POST"
  9.   } 
  10. }); 
  11.  
  12. io.on("connection", (socket) => { 
  13.   socket.on('sendMsg',(data)=>{ 
  14.     io.emit('pushMsg',data) 
  15.   }) 
  16. }); 
  17.  
  18. httpServer.listen(3000, function () { 
  19.   console.log('http://127.0.0.1:3000'
  20. }); 

客户端

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.  
  4. <head> 
  5.   <meta charset="UTF-8"
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge"
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0"
  8.   <title>Document</title> 
  9.   <script src="https://cdn.socket.io/4.2.0/socket.io.min.js" 
  10.     integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj" 
  11.     crossorigin="anonymous"></script> 
  12. </head> 
  13.  
  14. <body> 
  15.   <input type="text" id="text"
  16.   <input type="button" value="发送" onclick="send()"
  17.  
  18.   <script> 
  19.     var socket = io.connect('http://127.0.0.1:3000'
  20.     function send() { 
  21.       var text = document.getElementById('text').value 
  22.       socket.emit('sendMsg', text) 
  23.     } 
  24.  
  25.     socket.on('pushMsg', (data) => { 
  26.       console.log(data) 
  27.     }) 
  28. </script> 
  29.  
  30. </body> 
  31.  
  32. </html> 

没什么可解释的,就直接按照 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
责任编辑:武晓燕 来源: 勾勾的前端世界
相关推荐

2023-02-10 08:16:48

WebSocket简易聊天室

2022-07-26 14:53:10

WebSocket网络通信协议

2023-01-13 00:02:41

2023-01-05 09:17:58

2011-12-15 11:11:51

JavaNIO

2022-11-14 08:01:48

2015-07-06 10:42:18

PHP聊天室应用

2021-11-16 09:38:10

鸿蒙HarmonyOS应用

2021-02-06 23:26:25

聊天室开发WebSocket

2024-01-18 11:15:46

Pythonsocket聊天室

2022-12-01 08:25:23

eTsTCP聊天室

2011-06-09 15:44:29

Spring

2015-08-06 17:17:33

swoole聊天室

2022-04-18 10:36:48

社交软件聊天平台rocket.cha

2021-12-09 16:48:25

鸿蒙HarmonyOS应用

2022-04-02 11:28:37

元宇宙远程办公

2013-11-27 10:46:31

JavaEEWebsockets

2012-05-08 16:07:38

Android

2024-10-07 10:45:12

点赞
收藏

51CTO技术栈公众号