forked from csxiaoyaojianxian/JavaScriptStudy
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
170 lines (157 loc) · 4.49 KB
/
index.html
File metadata and controls
170 lines (157 loc) · 4.49 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<input type="text" id="text" />
<input type="button" onclick="sendMsg();" value="发送数据" />
<input type="button" onclick="getState();" value="获取readyState状态" />
<h1>服务端：node/server.js & php/server.js</h1>
<h2>websocket 特性</h2>
<p>
1.建立在 TCP 协议之上，服务器端的实现比较容易<br>
2.与 HTTP 协议有着良好的兼容性。websocket 把 80 端口作为默认连接端口，握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器，而websocket的运行使用的是443端口<br>
3.数据格式比较轻量，性能开销小，通信高效<br>
4.可以发送文本，也可以发送二进制数据<br>
5.没有同源限制，客户端可以与任意服务器通信<br>
6.协议标识符是ws（如果加密，则为wss），服务器网址就是 URL<br>
</p>
<p>
Socket.bufferedAmount
【事件】
Socket.onopen 连接建立时触发
Socket.onmessage 客户端接收服务端数据时触发
Socket.onerror 通信发生错误时触发
Socket.onclose 连接关闭时触发
【方法】
Socket.send() 使用连接发送数据
Socket.close() 关闭连接
<pre>
function WebSocketTest(){
if ("WebSocket" in window){
var ws = new WebSocket("ws://localhost:8080/echo");
ws.onopen = function(){
ws.send("发送数据");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
};
ws.onclose = function(){
alert("连接已关闭...");
};
}
else{
alert("您的浏览器不支持 WebSocket!");
}
}
</pre>
</p>
<script>
// 【 websocket创建 】
// var Socket = new WebSocket(url, [protocol]);
var ws=new WebSocket("ws://127.0.0.1:8000");
/**
* 获取websocket状态
*/
function getState(){
/**
* 【 readyState 】只读，表示连接状态
* CONNECTING：值为0，连接尚未建立，表示正在连接
* OPEN：值为1，表示连接成功，可以通信
* CLOSING：值为2，表示连接正在关闭
* CLOSED：值为3，表示连接已经关闭，或者打开连接失败
*/
switch (ws.readyState) {
case WebSocket.CONNECTING:
alert("state:CONNECTING");
break;
case WebSocket.OPEN:
alert("state:OPEN");
break;
case WebSocket.CLOSING:
alert("state:CLOSING");
break;
case WebSocket.CLOSED:
alert("state:CLOSED");
break;
default:
// this never happens
break;
}
}
/**
* 【 API 】
* 两种事件定义方式
* ws.onopen = function(event){}
* ws.addEventListener('open', function (event) {
* ws.send('Hello Server!');
* });
*/
ws.onopen=function(event){
console.log("Connection open ...");
};
ws.onmessage = function(event) {
console.log("Received data: " + event.data);
if(typeof event.data === String) {
console.log("Received data string: " + event.data);
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log("Received arraybuffer: " + buffer);
}
/**
* 可以使用binaryType属性，显式指定收到的二进制数据类型
*
// 收到的是 blob 数据
ws.binaryType = "blob";
console.log(event.data.size);
// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
console.log(event.data.byteLength);
*/
};
ws.onclose = function(event) {
console.log("Connection closed ...");
console.log("服务器断开代码："+event.code);
console.log("断开理由："+event.reason);
console.log("wasClean："+event.wasClean);
ws.close();
};
ws.onerror=function(event){
console.log(event);
};
function sendMsg(){
var content = document.getElementById("text").value;
/**
* 1.发送文本
*/
ws.send(content);
/**
* 2.发送 Blob 对象
*/
// var file = document.querySelector('input[type="file"]').files[0];
// ws.send(file);
/**
* 3.发送 ArrayBuffer 对象
* Sending canvas ImageData as ArrayBuffer
* 实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去，可以用来判断发送是否结束
* bufferedAmount只读，表示已被 send() 放入队列中等待传输但还没发出的 UTF-8 文本字节数
*/
// var img = canvas_context.getImageData(0, 0, 400, 320);
// var binary = new Uint8Array(img.data.length);
// for (var i = 0; i < img.data.length; i++) {
// binary[i] = img.data[i];
// }
// ws.send(binary.buffer);
// var data = new ArrayBuffer(10000000);
// socket.send(data);
// if (socket.bufferedAmount === 0) {
// // 发送完毕
// } else {
// // 发送还没结束
// }
}
</script>
</body>
</html>