理解WebSocket

叱咤少帅（少帅）

2024-04-23 帮助1人

背景

比如我们想要实现webssh或者web界面能实时查到日志，这个时候websocket就很有用了

为什么需要 WebSocket？

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

参考文档

文档参考： https://www.ruanyifeng.com/blog/2017/05/websocket.html

简介

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

学新通

其他特点包括：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

学新通

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

属性

描述

Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

前端实现

客户端支持WebSocket的浏览器中，在创建socket后，可以通过onopen、onmessage、onclose和onerror四个事件对socket进行响应。

浏览器通过Javascript向服务器发出建立WebSocket连接的请求，连接建立后，客户端和服务器就可以通过TCP连接直接交换数据。当你获取WebSocket连接后，可以通多send()方法向服务器发送数据，可以通过onmessage事件接收服务器返回的数据。

//申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
var ws = new WebSocket("ws://localhost:8080");
ws.onopen = function(){　　//当WebSocket创建成功时，触发onopen事件
console.log("open");　　
ws.send("hello"); //将消息发送到服务端
}
ws.onmessage = function(e){　　
//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据　　
console.log(e.data);
}
ws.onclose = function(e){　　
//当客户端收到服务端发送的关闭连接请求时，触发onclose事件　
　console.log("close");}
ws.onerror = function(e){　
　 //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
　　console.log(error);
}

其他案例用于理解前端：

<!DOCTYPE html>
<html>
<head>
</head>
<style>
#msg{
width:400px; height:400px; overflow:auto;
}
</style>
</head>
<body>
<p>实时日志</p>
<div id="msg"></div>
<script src="http://libs.百度.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
/* !window.WebSocket、window.MozWebSocket检测浏览器对websocket的支持*/
if (!window.WebSocket) {
if (window.MozWebSocket) {
window.WebSocket = window.MozWebSocket;
} else {
$('#msg').prepend("<p>你的浏览器不支持websocket</p>");
}
}
/* ws = new WebSocket 创建WebSocket的实例注意设置对以下的websocket的地址哦*/
ws = new WebSocket('ws://192.168.2.222:8000/websocket/');
/*
ws.onopen 握手完成并创建TCP/IP通道，当浏览器和WebSocketServer连接成功后，会触发onopen消息
ws.onmessage 接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据;
*/
ws.onopen = function(evt) {
$('#msg').append('<li>websocket连接成功</li>');
}
ws.onmessage = function(evt) {
$('#msg').prepend('<li>' evt.data '</li>');
}
});
</script>
</body>
</html>

webSocket.onmessage:

实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {
var data = event.data;
// 处理数据
};
ws.addEventListener("message", function(event) {
var data = event.data;
// 处理数据
});

注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。

ws.onmessage = function(event){
if(typeof event.data === String) {
console.log("Received data string");
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log("Received arraybuffer");
}
}

后端的实现

官网： Django Channels — Channels 3.0.4 documentation

要实现websocket，那么前端和后端都需要进行编写，才能实现前后端。

django实现websocket大致上有两种方式，一种channels，一种是dwebsocket

注意：Django 3.0 以上不支持dwebsocket模块，启动时，会报错：

File "D:\py-res\project_devops\devops\ces\views.py", line 8, in <module>
def webst(request):
File "D:\Program Files\Python38\lib\site-packages\dwebsocket\decorators.py", line 31, in accept_websocket
func = _setup_websocket(func)
File "D:\Program Files\Python38\lib\site-packages\dwebsocket\decorators.py", line 24, in _setup_websocket
new_func = decorator(new_func)
File "D:\Program Files\Python38\lib\site-packages\django\utils\decorators.py", line 117, in _decorator
middleware = middleware_class(view_func, *m_args, **m_kwargs)
TypeError: WebSocketMiddleware() takes no arguments

因此，如果使用Django 3.0 或者以上，必须使用channels。

其他案例理解后端：

#!/usr/bin/env python
# -*- coding:utf-8 -*-
from bottle import get, run
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
users = set() # 连接进来的websocket客户端集合
@get('/websocket/', apply=[websocket])
def chat(ws):
users.add(ws)
while True:
msg = ws.receive() # 接客户端的消息
if msg: # 也可以不判断，直接服务端检测内容直接推送给客户端
for u in users:
u.send(msg) # 发送信息给所有的客户端
else:
break
# 如果有客户端断开连接，则踢出users集合
users.remove(ws)
run(host='0.0.0.0', port=8000, server=GeventWebSocketServer)

这篇好文章是转载于：学新通技术网

理解WebSocket

背景

为什么需要 WebSocket？

参考文档

简介

WebSocket 属性

前端实现

webSocket.onmessage:

后端的实现

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐