1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > Document</ title >
6+ </ head >
7+
8+ < input type ="text " id ="text " />
9+ < input type ="button " onclick ="sendMsg(); " value ="发送数据 " />
10+ < input type ="button " onclick ="getState(); " value ="获取readyState状态 " />
11+
12+ < h1 > 服务端：node/server.js & php/server.js</ h1 >
13+ < h2 > websocket 特性</ h2 >
14+ < p >
15+ 1.建立在 TCP 协议之上，服务器端的实现比较容易< br >
16+ 2.与 HTTP 协议有着良好的兼容性。websocket 把 80 端口作为默认连接端口，握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器，而websocket的运行使用的是443端口< br >
17+ 3.数据格式比较轻量，性能开销小，通信高效< br >
18+ 4.可以发送文本，也可以发送二进制数据< br >
19+ 5.没有同源限制，客户端可以与任意服务器通信< br >
20+ 6.协议标识符是ws（如果加密，则为wss），服务器网址就是 URL< br >
21+ </ p >
22+
23+ < script >
24+
25+ var ws = new WebSocket ( "ws://127.0.0.1:8000" ) ;
26+
27+ /**
28+ * 获取websocket状态
29+ */
30+ function getState ( ) {
31+ /**
32+ * 【 readyState 】
33+ * CONNECTING：值为0，表示正在连接
34+ * OPEN：值为1，表示连接成功，可以通信了
35+ * CLOSING：值为2，表示连接正在关闭
36+ * CLOSED：值为3，表示连接已经关闭，或者打开连接失败
37+ */
38+ switch ( ws . readyState ) {
39+ case WebSocket . CONNECTING :
40+ alert ( "state:CONNECTING" ) ;
41+ break ;
42+ case WebSocket . OPEN :
43+ alert ( "state:OPEN" ) ;
44+ break ;
45+ case WebSocket . CLOSING :
46+ alert ( "state:CLOSING" ) ;
47+ break ;
48+ case WebSocket . CLOSED :
49+ alert ( "state:CLOSED" ) ;
50+ break ;
51+ default :
52+ // this never happens
53+ break ;
54+ }
55+ }
56+ /**
57+ * 【 API 】
58+ * 两种事件定义方式
59+ * ws.onopen = function(event){}
60+ * ws.addEventListener('open', function (event) {
61+ * ws.send('Hello Server!');
62+ * });
63+ */
64+ ws . onopen = function ( event ) {
65+ console . log ( "Connection open ..." ) ;
66+ } ;
67+
68+ ws . onmessage = function ( event ) {
69+ console . log ( "Received data: " + event . data ) ;
70+
71+ if ( typeof event . data === String ) {
72+ console . log ( "Received data string: " + event . data ) ;
73+ }
74+ if ( event . data instanceof ArrayBuffer ) {
75+ var buffer = event . data ;
76+ console . log ( "Received arraybuffer: " + buffer ) ;
77+ }
78+ /**
79+ * 可以使用binaryType属性，显式指定收到的二进制数据类型
80+ *
81+ // 收到的是 blob 数据
82+ ws.binaryType = "blob";
83+ console.log(event.data.size);
84+ // 收到的是 ArrayBuffer 数据
85+ ws.binaryType = "arraybuffer";
86+ console.log(event.data.byteLength);
87+ */
88+ } ;
89+
90+ ws . onclose = function ( event ) {
91+ console . log ( "Connection closed ..." ) ;
92+ console . log ( "服务器断开代码：" + event . code ) ;
93+ console . log ( "断开理由：" + event . reason ) ;
94+ console . log ( "wasClean：" + event . wasClean ) ;
95+ ws . close ( ) ;
96+ } ;
97+
98+ ws . onerror = function ( event ) {
99+ console . log ( event ) ;
100+ } ;
101+
102+ function sendMsg ( ) {
103+ var content = document . getElementById ( "text" ) . value ;
104+ /**
105+ * 1.发送文本
106+ */
107+ ws . send ( content ) ;
108+ /**
109+ * 2.发送 Blob 对象
110+ */
111+ // var file = document.querySelector('input[type="file"]').files[0];
112+ // ws.send(file);
113+ /**
114+ * 3.发送 ArrayBuffer 对象
115+ * Sending canvas ImageData as ArrayBuffer
116+ * 实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去，可以用来判断发送是否结束
117+ */
118+ // var img = canvas_context.getImageData(0, 0, 400, 320);
119+ // var binary = new Uint8Array(img.data.length);
120+ // for (var i = 0; i < img.data.length; i++) {
121+ // binary[i] = img.data[i];
122+ // }
123+ // ws.send(binary.buffer);
124+
125+ // var data = new ArrayBuffer(10000000);
126+ // socket.send(data);
127+ // if (socket.bufferedAmount === 0) {
128+ // // 发送完毕
129+ // } else {
130+ // // 发送还没结束
131+ // }
132+ }
133+
134+ </ script >
135+ </ body >
136+ </ html >
0 commit comments