本文主要是介绍JS中WebSocket双通道传输，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.什么是WebSocket？
WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP / HTTPS协议进行握手后创建一个用于交换数据的TCP连接，此后服务端与客户端通过此TCP连接进行实时通信。
2.WebSocket的优点
以前我们实现推送技术，用的都是轮询，在特点的时间间隔有浏览器自动发出请求，将服务器的消息主动的拉回来，在这种情况下，我们需要不断的向服务器发送请求，然而HTTP request的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。会占用大量的带宽和服务器资源。
WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。在建立连接之后，服务器可以主动传送数据给客户端。
此外，服务器与客户端之间交换的标头信息很小。
WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息。
3.如何使用WebSocket
在支持WebSocket的浏览器中，在创建socket之后。可以通过onopen，onmessage，onclose即onerror四个事件实现对socket进行响应：
例：
var ws = new WebSocket(“ws: //localhost:8080”);
ws.onopen = function()
{console.log(“Open”);ws.send(“hello world”);
};
ws.onmessage = function(event)
{console.log(event.data)
};
ws.onclose = function(event)
{console.log(“Close ! ”);
};
ws.onerror = function(event)
{console.log(“ConnectError ! ”);
};
4.WebSocket 属性
属性 / 描述
Socket.readyState 只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
5.WebSocket 事件
事件 / 事件处理程序 / 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发
6.WebSocket 方法
Socket.send() 使用连接发送数据
Socket.close() 关闭连接
备注：
WebSocket连接后一分钟自动断开关闭，这是因为websocket长连接有默认的超时时间（1分钟，由proxy_read_timeout决定），就是超过一定的时间没有发送任何消息，连接会自动断开。解决办法就是让浏览器每隔一定时间（要小于超时时间）发送一个心跳。
例：
window.setInterval(function(){ //每隔5秒钟发送一次心跳，避免websocket连接因超时而自动断开
var ping = {"type":"ping"};
ws.send(JSON.stringify(ping));
},5000);
所有的操作都是采用事件的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。
这篇关于JS中WebSocket双通道传输的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
