Repository navigation
Expand file tree
/
Copy pathjavascript-obj-WebSocket.js
More file actions
96 lines (80 loc) · 2.15 KB
/
Copy pathjavascript-obj-WebSocket.js
File metadata and controls
96 lines (80 loc) · 2.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
------------------------
WebSocket-js |
------------------------
# 很显然这是JS的东西
# 检测浏览器是否支持WebSocket
function loadDemo() {
if (window.WebSocket) {
//支持
} else {
//不支持
}
}
------------------------
WebSocket-WebSocket |
------------------------
# 创建 WebSocket 对象
var Socket = new WebSocket(url,[protocol]);
* url:表示连接的地址,通常以协议:"ws://"或者"wss://"(安全的websocket)协议开头
* protocol:是一个数组,可以接受一个或者多个子协议,该参数并不是必须的
# 属性
readyState
* 只读属性 readyState 表示连接状态，可以是以下值
CONNECTING :值为0,表示正在连接
OPEN :值为1,表示连接成功，可以通信了
CLOSING :值为2,表示连接正在关闭
CLOSED :值为3,表示连接已经关闭,或者打开连接失败
bufferedAmount
* 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数.
* 可以判断消息是否发送完毕
if (socket.bufferedAmount === 0) {
// 发送完毕
} else {
// 发送还没结束
}
binaryType
* 指定二进制数据类型
* 枚举值(字符串)
binaryType = "blob";
binaryType = "arraybuffer";
# 事件
* 事件处理函数,都会有一个 event 参数
Socket.onopen
* 连接建立时触发
* event属性
var protocol = event.target.protocol
Socket.onmessage
* 客户端接收服务端数据时触发
* event属性
var data = event.data;
* 判断消息类型
if(typeof event.data === String) {
console.log("Received data string");
}
if(event.data instanceof ArrayBuffer){
console.log("Received arraybuffer");
}
Socket.onerror
* 通信发生错误时触发
Socket.onclose
* 连接关闭时触发
* event属性
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
* event通用属性
# 方法
Socket.send()
* 使用连接发送数据
* 发送二进制数据
var file = document.querySelector('input[type="file"]').files[0];
ws.send(file);
Socket.close()
* 关闭连接
* 在窗口关闭之前,就关闭到socket连接,有可能会导致服务器端异常
window.onbeforeunload = function () {
ws.close();
}
------------------------
WebSocket-WebSocket |
------------------------