HTML5(十一)——WebSocket 基础教程

一叶居 發表於 2021-8-16 15:35:00

<h1 class="pgc-h-arrow-right" data-track="1">一、为什么要学 WebSocket?</h1>
websocket 是 HTML5 提供的一种长链接双向通讯协议，使得客户端和服务器之间的数据交换更简单，允许服务端主动向客户端推送数据，并且客户端与服务端只需连接一次，就可以保持长久连接，并进行数据通信。
websocket 与 http 区别：
<ul>
<li data-track="4">http 链接分为长链接、短链接，短链接是发送一个请求，返回一个响应，长链接是在一定周期内保持链接。但是 websocket 只需连接一次就可以保持长链接，不需要的时候可以手动断开。</li>
<li data-track="6">http 通信中，客户端是主动的，服务端是被动的。但是 websocket，服务端可以主动向客户端推送数据。</li>
<li data-track="7">http 通过轮询建立的长链接，多次建立 request / response 会产生冗余的头部信息。</li>
</ul>
ajax 轮询与 websocket 通信原理如图：
 
<div class="pgc-img"><img alt="HTML5(十一)——WebSocket 基础教程" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/4c5e80508e2d4b67bc1d12705a6b07de?from=pc">
 
</div>
 
websocket 就是为了解决客户端发起多个 http 请求到服务器资源，浏览器必须要经过长时间的，轮询问题而生的，实现多路复用。它最大特点就是服务器可以主动向客户端推送信息。
<h1 class="pgc-h-arrow-right" data-track="51">二、WebSocket 对象</h1>
2.1、创建对象：
<pre class="syl-page-code hljs cs"><code>let ws = new WebSocket( url , [ protocol ] )</code></pre>
url：指定连接的后台服务地址。
protocol：指定可接受的子协议，是可选参数。
2.2、对象属性
readyState：表示连接状态，是一个只读属性。
使用语法：ws.readyState
返回的值有4个，分别表示的意义：
<ul>
<li data-track="20">0 - 未建立连接</li>
<li data-track="21">1 - 已建立连接，可正常通信</li>
<li data-track="22">2 - 连接正在进行关闭</li>
<li data-track="23">3 - 连接已经关闭或断开，无法通信</li>
</ul>
bufferedAmount：已被放入等待传输队列，但是还没有发出的 UTF-8 文本字节数，也是只读属性。
2.3、对象事件
onopen - 连接时触发，用于指定连接成功后的回调函数。
使用语法：
<div class="cnblogs_code">
<pre>// 方法一：只可以指定一个回调函数
ws.onopen = function(){

}
//方法二：可以指定多个回调函数
ws.addEventListener('open',function(){

})</pre>
</div>
 
onclose - 关闭时触发，指定连接关闭时回调函数。
使用语法：与 onopen 完全一致。
onmessage - 客户端接收服务端数据时触发，指定回调函数。
使用语法：
<div class="cnblogs_code">
<pre>// 方法一：
ws.inmessage = function(event){
let data = event.data
//服务器传给客户端的数据
}
// 方法二：
ws.addEventListener('inmessage', function(event){
let data = event.data
//服务器传给客户端的数据
})</pre>
</div>
 
onerror - 通信发生错误时触发，并指定回调函数。
使用语法：
<div class="cnblogs_code">
<pre>//方法一
ws.onerror = function(){
//错误处理
}
//方法二
ws.addEventListener('error',function(){
//错误处理
})</pre>
</div>
 
2.3、对象事件
send - 用于向服务器发送数据。
使用语法：
<pre class="syl-page-code hljs css"><code>ws.send( data )</code></pre>
data ：是发给服务器的数据，这个数据可以是字符串、数组、json、Blob 对象或 ArrayBuffer 对象等。
如发送 Blob 对象例子：
<div class="cnblogs_code">
<pre>var file = document.querySelector('input='file'').files
ws.send(file)</pre>
</div>
close - 关闭连接
使用语法：
<pre class="syl-page-code hljs css"><code>ws.close()</code></pre> 
来源：https://www.cnblogs.com/web-learn/p/15148141.html

頁: [1]

琼殿技术论坛's Archiver

HTML5(十一)——WebSocket 基础教程