WebSocket 初体验
-
针对与项目需要,我在网上学习了WebSocket 的相关知识。对于WebSocket ,你又了解多少呢?
为什么需要 WebSocket?
初次接触WebSocket ,我们都会问相同的问题:既然有了HTTP请求,我们为什么还需要另一个协议?它会有什么优点呢?
答案其实十分简单,就是因为HTTP请求只能从客户端发出,并且无法保持通话。
在我们项目中,我们需要在电脑屏幕上面扫描二维码,然后在手机上操作,在手机上做好相关的填写提交后,电脑上的浏览器应该立即显示扫描成功后的页面。
如果我们使用的是HTTP请求,那么浏览器必须轮询:每隔一段时间向服务器请求手机是否完成相应的操作。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦,并且轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。
因此,工程师们一直在思考,有没有更好的方法。WebSocket 就是这样发明的。
简介
WebSocket 与HTTP不同的特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话。
如上图所示,如果我们需要即时的、变化快的数据,可以使用WebSocket,这样可以减少客户端向服务器请求的时间。如果只是十分平常的、变化不是很快的数据,可以使用HTTP的GET、POST请求。
简单示例
WebSocket 的用法相当简单。
//nodejs //server.js var ws = new WebSocket("wss://echo.websocket.org"); //协议标识符是ws(如果加密,则为wss),服务器网址就是 URL ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); }; ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log("Connection closed."); };
//client.js var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener("message", function(event) { var data = event.data; // 处理数据 });
具体内容不再详细深入,因为WebSocket原生代码十分生硬,在判别不同类型请求的时候不是很好区分。
参考链接