webSocket 基础内容

原创 minsong 随笔 HTML5 263阅读 2018-03-12 15:51:55 举报

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

1.WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。
var ws = new WebSocket('ws://localhost:8080');

2.WebSocket 属性

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

3.WebSocket 事件

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发
3.1 webSocket.onopen

实例对象的onopen属性,用于指定连接成功后的回调函数。

如果要指定多个回调函数,可以使用addEventListener方法。

3.2 webSocket.onclose

实例对象的onclose属性,用于指定连接关闭后的回调函数。

3.3 webSocket.onmessage

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

注意,服务器数据可能是文本,也可能是二进制数据(blob对象或Arraybuffer对象)。

除了动态判断收到的数据类型,也可以使用binaryType属性,显式指定收到的二进制数据类型。

3.4 webSocket.onerror

实例对象的onerror属性,用于指定报错时的回调函数。

4.WebSocket 方法

|方法|描述|
|Socket.send()|使用连接发送数据|
|Socket.close()|关闭连接|

4.1 webSocket.send()

实例对象的send()方法用于向服务器发送数据。
发送文本的例子。

发送 Blob 对象的例子。

发送 ArrayBuffer 对象的例子。

4.2 webSocket.close()

关闭连接
websocket.close();

5.代码案例

1、申请一个WebSocket对象

参数是需要连接的服务器端的地址,同http协议使用http://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。

2、WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror

我们可以看出所有的操作都是采用消息的方式触发的,这样就不会阻塞UI,使得UI有更快的响应时间,得到更好的用户体验。

(1)当Browser和WebSocketServer连接成功后,会触发onopen消息;

(2)如果连接失败,发送、接收数据失败或者处理数据出现错误,browser会触发onerror消息;

(3)当Browser接收到WebSocketServer发送过来的数据时,就会触发onmessage消息,参数evt中包含server传输过来的数据;

(4)当Browser接收到WebSocketServer端发送的关闭连接请求时,就会触发onclose消息。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复