WebSockets通信
1. websocket是什么？
WebSocket是一种网络通信协议。
2. 为什么需要websocket?
我们有http协议，为什么还需要websocket协议呢？
因为http协议有一个缺陷，通信只能是客户端发起请求的，服务器端返回查询结果。比如说 我想知道一个实时新闻，那么每次新闻更新后，我都要刷新页面
，发起客户端请求，服务器端返回结果。不能做到服务器端推送消息给客户端，当然我们可以使用轮询，看看服务器有么有新的消息，比如 "聊天室" 这样的，但是轮询效率非常低的，因此websocket就这样产生了。
websocket最大的优点是：服务器可以主动向客户端推送消息，客户端也可以主动向服务器端发送消息。
使用websockets可以在服务器与客户端之间建立一个非http的双向链接。这个链接是实时的，也是永久的(除非被关闭)，当服务器想向客户端发送
数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立链接，只要客户端有一个被打开的socket(套接字)并且与服务器建立链接，服务器就可以
把数据推送到这个socket上。
3. 如何使用websocket？
WebSocket接收一个url参数，然后调用WebSocket对象的构造器来建立与服务器之间的通信链接。
如下代码初始化：
var websocket = new WebSocket('wss://echo.websocket.org');
注意：URL字符串必须以 "ws" 或 "wss"（加密通信）开头。
如上代码，通信链接建立好之后，就可以进行客户端与服务器端的双向通信了。可以使用websocket对象的send方法对服务器发送数据，但是只能
发送文本数据(但是我们可以使用JSON对象把任何js对象转换成文本数据后再进行发送)。
3-1 使用send方法的代码如下：
websocket.send("data");
3-2 接收服务器传过来的数据
通过onmessage事件来接收服务器传过来的数据，如下代码：
websocket.onmessage = function(event) { var data = event.data; }
3-3 监听socket的打开事件
通过获取onopen事件来监听socket的打开事件。如下代码：
websocket.onopen = function(event) { // 开始通信时的处理 }
3-4 监听socket的关闭事件
通过获取onclose事件来监听socket的关闭事件。如下代码：
websocket.onclose = function(event) { // 通信结束时的处理 }
通过close方法来关闭socket, 如下代码：
websocket.close();
3-5 webSocket.readyState
可以通过读取readyState的属性值来获取WebSocket对象的状态，readyState属性存在以下几种属性值。
CONNECTING(数字值为0)， 表示正在连接。
OPEN(数字值为1)，表示已建立连接。
CLOSING(数字值为2)，表示正在关闭连接。
CLOSED(数字值为3)，表示已关闭链接。
4. 发送消息demo
请看效果演示
如下代码：
var websocket = new WebSocket('wss://echo.websocket.org'); websocket.onopen = function(e) { console.log('Connection open ...'); websocket.send("Hello WebSocket!"); } websocket.onmessage = function(e) { console.log('Received Message: ' + e.data); websocket.close(); } websocket.onclose = function(e) { console.log('Connection closed.'); }
4-1 下面再看一个demo，客户端使用websocket技术与服务器端进行连接并且发送信息的demo，代码如下：
var websocket; function connect() { var msg = document.getElementById('message'); try { var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已关闭连接"); var url = "wss://echo.websocket.org"; websocket = new WebSocket(url); msg.innerHTML +="<p>Socket状态为:"+readyState[websocket.readyState]+"</p>"; websocket.onopen = function() { msg.innerHTML += "<p>Socket状态为"+readyState[websocket.readyState]+"</p>" } websocket.onmessage = function(msg) { msg.innerHTML += "<p>接收信息："+msg.data+"</p>"; } websocket.onclose = function() { msg.innerHTML += "<p>Socket状态为:"+readyState[websocket.readyState]+"</p>" } } catch(e) { msg.innerHTML += "<p>发生异常了</p>"; } } function send() { var text = document.getElementById('text').value; var msg = document.getElementById('message'); if (text == "") { msg.innerHTML += "<p>请输入一些文字</p>"; return; } try { websocket.send(text); msg.innerHTML += "<p>发送数据:"+text+"</p>"; } catch(e) { msg.innerHTML += "<p>发送数据异常了</p>"; } document.getElementById('text').value = ''; } function disconnect() { websocket.close(); }
4-2 发送对象
使用websocket，不仅可以发送文本数据，而且可以使用JSON对象来发送JS中的对象，使用JSON对象的关键是使用它的两个方法，
JSON.parse方法与JSON.stringify方法，JSON.stringify方法把javascript对象转换成文本数据，JSON.parse方法将文本数据转换为Javascript对象。如下代码演示：
<!DOCTYPE html> <html> <head> <title>websocket</title> <style> </style> </head> <body> <script> var websocket = new WebSocket('wss://echo.websocket.org'); websocket.onopen = function(e) { console.log('Connection open ...'); websocket.send( JSON.stringify({ 'msg': 'payload' }) ); } websocket.onmessage = function(e) { console.log(JSON.parse(e.data)); websocket.close(); } websocket.onclose = function(e) { console.log('Connection closed.'); } </script> </body> </html>
4-3 发送与接收原始二进制数据
在HTML5中，除了可以使用websocket发送文本数据以及对象之外，还可以使用websocket来发送ArrayBuffer对象与Bolb对象。如下代码：
<!DOCTYPE html> <html> <head> <title>websocket</title> <style> </style> </head> <body> <script> var websocket = new WebSocket('wss://echo.websocket.org'); websocket.onopen = function(e) { console.log('Connection open ...'); // 发送二进制对象 var buffer = new ArrayBuffer(128); websocket.send(buffer); var intview = new Uint32Array(buffer); websocket.send(intview); var blob = new Blob([buffer]); websocket.send(blob); } websocket.onmessage = function(e) { console.log(e.data); websocket.close(); } websocket.onclose = function(e) { console.log('Connection closed.'); } </script> </body> </html>
比如上传图片，发送图片二进制数据如下：
<!DOCTYPE html> <html> <head> <title>websocket</title> <style> </style> </head> <body> <input type="file" value="选择图片" id="file" accept="image/*"/> <button onclick="upload()">上传图片</button> <script> var websocket = new WebSocket('wss://echo.websocket.org'); function upload() { var file = document.getElementById('file').files[0]; console.log(file) websocket.send(file); } websocket.onmessage = function(e) { console.log(e.data); } </script> </body> </html>