websocket 带头部信息请求 header_聊天应用怎么做？带你深度了解WebSocke实现原理...

最新推荐文章于 2024-05-24 13:45:47 发布

weixin_39942037

最新推荐文章于 2024-05-24 13:45:47 发布

阅读量8.6k

点赞数

文章标签： websocket 带头部信息请求 header

写在开头：

为什么要使用websocket协议(以下简称ws协议)，什么场景会使用？

我之前是做IM相关桌面端软件的开发，基于TCP长链接自己封装的一套私有协议，目前公司也有项目用到了ws协议，好像无论什么行业，都会遇到这个ws协议。

首先它的使用是很简单的，在H5和Node.js中都是基于事件驱动

在H5中

在H5中的使用案例：

<html><head><meta charset="utf-8"><script type="text/javascript">function WebSocketTest() {
    if ("WebSocket" in window) {
                    alert("您的浏览器支持 WebSocket!");// 打开一个 web socketvar ws = new WebSocket("ws://localhost:9998");                ws.onopen = function () {
    // Web Socket 已连接上，使用 send() 方法发送数据                    ws.send("发送数据");                    alert("数据发送中...");                };                ws.onmessage = function (evt) {
    var received_msg = evt.data;                    alert("数据已接收...");                };                ws.onclose = function () {
    // 关闭 websocket                    alert("连接已关闭...");                };            }else {
    // 浏览器不支持 WebSocket                alert("您的浏览器不支持 WebSocket!");            }        }script>head><body><div id="sse"><a href="javascript:WebSocketTest()">运行 WebSocketa>div>body>html>

Node.js中的服务端搭建:

const {Server} = require('ws');//引入模块const wss = new Server({ port: 9998 });//创建一个WebSocketServer的实例，监听端口9998wss.on('connection', function connection(socket)  {
        socket.on('message', function incoming(message) {
    console.log('received: %s', message);    socket.send('Hi Client');  });//当收到消息时，在控制台打印出来，并回复一条信息});

这样你就愉快的通信了，不需要关注协议的实现，但是真正的项目场景中，可能会有UDP、TCP、FTP、SFTP等场景，你还是需要了解不同的协议实现细节，这里我推荐一下某金的张师傅小册《TCP协议》，看过都说好。(这里没收钱，就是觉得好)

正式开始：

为什么要使用ws协议？

传统的Ajax轮询(即一直不听发请求去后端拿数据)或长轮询的操作太过于粗暴，性能更不用说。

ws协议在目前浏览器中支持已经非常好了，另外这里说一句，它也是一个应用层协议，成功升级ws协议，是101状态码，像webpack热更新这些都有用ws协议

这就是连接了本地的ws服务器

现在开始，我们实现服务端的ws协议，就是自己实现一个websocket类,并且继承Node.js的自定义事件模块，还要一个起一个进程占用端口，那么就要用到http模块

const { EventEmitter } = require('events');const { createServer } = require('http');class MyWebsocket extends EventEmitter {}module.exports = MyWebsocket;

这是一个基础的类，我们继承了自定义事件模块，还引入了http的createServer方法,此时先实现端口占用

const { EventEmitter } = require('events');const { createServer } = require('http');class MyWebsocket extends EventEmitter {
    constructor(options) {
    super(options);this.options = options;this.server = createServer();    options.port ? this.server.listen(options.port) : this.server.listen(8080); //默认端口8080  }}module.exports = MyWebsocket;

接下来，要先分析下请求ws协议的请求头、响应头

正常一个ws协议成功建立分下面这几个步骤

客户端请求升级协议

GET / HTTP/1.1Upgrade: websocketConnection:UpgradeHost: example.comOrigin: http://examp

最低0.47元/天解锁文章

weixin_39942037

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
websocket 带头部信息请求 header_聊天应用怎么做？带你深度了解WebSocke实现原理...

写在开头：为什么要使用websocket协议(以下简称ws协议)，什么场景会使用？我之前是做IM相关桌面端软件的开发，基于TCP长链接自己封装的一套私有协议，目前公司也有项目用到了ws协议，好像无论什么行业，都会遇到这个ws协议。首先它的使用是很简单的，在H5和Node.js中都是基于事件驱动在H5中在H5中的使用案例：<html><head><meta c...
复制链接

扫一扫