前言
一直在想要不要写下这篇,因为网上关于websocket的介绍和使用的好文实在太多太多,例如有这篇和这篇。
但我不管了,写下来,这样我就不用在想使用的时候总是去翻写过的源码了。
先回答几个简单的问题。
什么是websocket?websocket有什么用?什么时候用websocket?
这几个问题一起回答。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
全双工的意思差不多就是客户端可以向服务器通信,服务器也可以向客户端通信,
而以前使用的HTTP协议只能客户端向服务器通信,如果想要得到服务器的消息,只能不断地向服务器发起请求,
然而实在没什么消息的话,不断发请求实则是一种资源浪费,所以这种时候就需要使用websocket了。
websocket能保持一种长连接,而且服务器能主动向客户端发消息,对于那种需要保持长时间联系的场景那再适合不过了!
示例
websocket的使用非常的简单,下面是一个实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>websocket</title> </head> <body> <button id="openWS">连接</button> <button id="closeWS">关闭</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> var ws; // 先创建一个全局变量 $('#openWS').click(function(){ // 创建websocket的实例 // 实例一旦成功创建就会建立websocket连接 ws = new WebSocket('ws://xxx.com'); }); // 主动关闭连接 $('#closeWS').click(function(){ ws.close(); }); // 监听打开 ws.onopen = function() { console.log('连接成功'); // 做你想做的事 }; // 监听错误 ws.onerror = function(){ console.log('连接失败'); // 做你想做的事 }; // 监听消息 ws.onmessage = function(data) { console.log(data); // 做你想做的事 }; // 监听窗口关闭 在窗口关闭前自动关闭连接 ws.onbeforeunload = function(){ ws.close(); }; // 监听关闭 ws.onclose = function() { console.log('连接关闭'); // 做你想做的事 }; // 在建立websocket连接之后,就可以向服务器发送消息 var data = '我想告诉你'; ws.send(data); </script> </body> </html>
更多的实例属性和方法点这里。