Websocket学习笔记

学习背景

经过较为全面的考虑，结合老师的意见，决定在毕设中引入在线聊天的功能。

经过一晚上的文献与资料的查询，了解到WebSocket比传统的Ajax在该场景中更加具备优势。

但出于应用总体开发进度角度考虑，决定暂时使用传统方案解决此问题，后续如有特殊需求，再考虑此技术路线。

基本概念

WebSocket是一种计算机通信协议，通过单个TCP连接提供全双工通信通道。

WebSocket 与HTTP不同。这两种协议都位于OSI 模型的第 7 层，并依赖于第 4 层的 TCP。尽管它们不同，但RFC 6455声明 WebSocket“旨在通过 HTTP 端口 443 和 80 工作以及支持 HTTP 代理和中介” ，从而使其与 HTTP 兼容。为了实现兼容性，WebSocket握手使用HTTP Upgrade 标头[1]从 HTTP 协议更改为 WebSocket 协议。

与 HTTP轮询等半双工替代方案相比，WebSocket 协议支持Web 浏览器（或其他客户端应用程序）和Web 服务器之间的交互，从而促进与服务器之间的实时数据传输。这是通过为服务器提供一种标准化的方式来实现的，即无需客户端首先请求即可向客户端发送内容，并允许在保持连接打开的同时来回传递消息。通过这种方式，可以在客户端和服务器之间进行双向正在进行的对话。通信通常通过 TCP端口完成编号 443（或在不安全连接的情况下为 80），这对于使用防火墙阻止非 Web Internet 连接的环境很有用。使用诸如Comet或Adobe Flash Player之类的权宜之计以非标准化方式实现了类似的双向浏览器-服务器通信。

传统的http通信模型与websocket对比图示：

一句话就是：WebSocket允许客户端向服务器主动发出请求同时允许服务器向客户端主动发出请求（只需要建立一次连接）。

客户端

在html5中，使用 JavaScript 调用 Websocket 方法很简单就能创建一个 websocket 连接。

服务器会为帮我们完成连接、握手的操作，JavaScript 使用事件机制来处理浏览器与服务器的交互：

// 创建一个 websocket 连接
var ws = new WebSocket("ws://127.0.0.1:8080");

// websocket 创建成功事件
ws.onopen = function () {
};

// websocket 接收到消息事件
ws.onmessage = function (e) {
    var msg = JSON.parse(e.data);
}

// websocket 错误事件
ws.onerror = function () {
};

发送消息也很简单，直接调用 ws.send(msg) 方法就行了。

服务端

可以使用多种语言实现，常见的是Node.js与Java，已经看了演示效果，后续在应用中如果需要涉及再做补充。

参考资料：

https://en.wikipedia.org/wiki/WebSocket

https://www.ruanyifeng.com/blog/2017/05/websocket.html

https://learnku.com/articles/36471

https://juejin.cn/post/6844903505677778952

版权属于：soarli

本文链接：https://blog.soarli.top/archives/602.html

转载时须注明出处及本声明。