WebSocket 知识使用

webSocket 含义

websocket是一个通过socket实现的双工通道，可以请求响应，服务端也可以主动推送信息给客户端。

socket 实现

服务端（socket服务端）

1、服务端开启socket，监听IP和端口。
3、允许连接。
5、*服务端接收到特殊的值【sha1对特殊的值、migic string="" 永远不变的字符串，进行加密】。
6、*加密后的值发送给客户端。
migic string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B1' 类似的16进制字符串

客户端（浏览器）

2、客户端发起连接请求（IP和端口）。
4、*客户端生成一个XXX，【sha1对特殊的值、migic string="" 永远不变的字符串，进行加密】，向服务端发送一段特殊值。
7、客户端收到加密值，并进行对比，相同可进行通讯。

建立连接及收发数据

#socket服务端
import socket
import base64
import hashlib
sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR)
sock.bind(('127.0.0.1',8002))
sock.listen(5)
#等待用户连接
conn,address = sock.accept()
 #客户端服务端握手消息，magic string 进行sha1加密
data = conn.recv(8096)
#将客户端的data进行处理得到headers字典
#获取到Sec-WebSocket-Key值
magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B1'
value = headers[Sec-WebSocket-Key] + magic_string
#加密
ac = base64.b64encode(hashlib.sha1(value.encode('utf-8')).digest())
#制作响应头
response_tpl = 'HTTP/1.1 101 Switching Protocols\r\n'\
						'Upgrade:websocket/r/n'\
						'Connection:Upgrade\r\n'\
						'Sec-WebSocket-Accept:%s\r\n'\ # 返回客户端加密信息
						'WebSocket-Location:ws://%s%s\r\n\r\n'
response_str = response_tpl%(ac.encode('utf-8'),headers['Host'],headers['url'])
#发送回客户端
conn.send(byres(response_str,encoding='utf-8'))
info = conn.recv(8096)

// 浏览器客户端
ws = new WebSocket('ws://127.0.0.1:8002') //连接到服务端
// 连接成功执行onopen
ws.onopen = function(){
	console.log('成功！')
	ws.send('hello')
}
// 接收服务端返回的值
ws.onmessage = function(event){
	var response = event.data; // 获取到服务端返回的值
	console.log(response)
}

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

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

运用

         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }