WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。 HTTP 协议有一个缺陷:通信只能由客户端发起。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用"轮询":每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。因此,工程师们一直在思考,有没有更好的方法。WebSocket 就是这样发明的。
WebSocket 如何工作?
Web浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。由于 WebSockets 连接长期存在,与典型的HTTP连接不同,对服务器有重要的影响。
基于多线程或多进程的服务器无法适用于 WebSockets,因为它旨在打开连接,尽可能快地处理请求,然后关闭连接。任何实际的 WebSockets 服务器端实现都需要一个异步服务器。
WebSocket特点
它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。
- 建立在 TCP 协议之上,服务器端的实现比较容易。
- 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
- 数据格式比较轻量,性能开销小,通信高效。
- 可以发送文本,也可以发送二进制数据。
- 没有同源限制,客户端可以与任意服务器通信。
- 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
客户端 API
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] ); 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象:
属性 | 描述 |
---|---|
Socket.readyState | 只读属性 readyState 表示连接状态,可以是以下值:0 - 表示连接尚未建立。1 - 表示连接已建立,可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。 |
Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。 |
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 连接建立时触发 |
message | Socket.onmessage | 客户端接收服务端数据时触发 |
error | Socket.onerror | 通信发生错误时触发 |
close | Socket.onclose | 连接关闭时触发 |
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:
方法 | 描述 |
---|---|
Socket.send() | 使用连接发送数据 |
Socket.close() | 关闭连接 |
简单的例子
// 1.创建对象 var socket = new WebSocket('wss://echo.websocket.org'); socket.onopen = function(){//打开连接 console.log(socket.readyState) socket.send('发送参数条件或数据'); console.log('数据发送.....'); } // 接收消息或数据 socket.onmessage = function(response){ console.log(socket.readyState)//查询连接状态 console.log(response); // console.log('数据接收......') } socket.onclose = function(){ console.log('数据关闭......'); } // socket.close();//必要时候调用,会运行onclose函数
聊天室原理
- npm install nodejs-websocket 下载nodejs-websocket包
- 创建一个websocketServer.js
- 创建一个index.html
- 在黑窗口输入 node websocketServer.js
- 双击打开index.html即可
<!--websocketServer.js--> var ws = require("nodejs-websocket")//引入包 var PORT = 3000;//设置端口号 var clientCount = 0//定义连接的次数 var server = ws.createServer(function (conn) { console.log("New connection"); clientCount++;//连接累加,计算多少个人登录 conn.nickname = 'user'+clientCount;//设置简易用户名 var mes = {}; mes.type = 'enter';//标记,连接时,用户进入的提示信息 mes.data = conn.nickname+'comes in'; broadcast(JSON.stringify(mes)); conn.on("text", function (str) {//发送信息 console.log("Received "+str); var mes = {}; mes.type = 'message';//标记,input输出的消息 mes.data = conn.nickname+":"+str; broadcast(JSON.stringify(mes)); // broadcast(conn.nickname+":"+str); // conn.sendText(str) }) conn.on("close", function (code, reason) {//发送关闭连接信息 console.log("Connection closed") var mes = {}; mes.type = 'leave';//标记,离开时的提示信息 mes.data = conn.nickname + ' left'; broadcast(JSON.stringify(mes)); }) conn.on('error',function(err){//捕抓报错信息 console.log('headle err'); console.log(err); }) }).listen(PORT) console.log('websocket server open.....'); function broadcast(str){ server.connections.forEach(function(connection){ connection.sendText(str); }) }
<!--index.js--> <body> <h1>Call room</h1> <input type="text" id="sendTxt"> <button id="sendBtn">发送</button> <div id="recv"></div> <script> var websocket = new WebSocket("ws://localhost:3000");//创建websocket对象 function showMessage(str,type){//根据后台给出的标记判断,什么消息用什么颜色标记 var div = document.createElement('div'); div.innerHTML = str; console.log(type); if(type == 'enter'){ div.style.color = 'blue'; }else if(type == 'message'){ div.style.color = 'block'; }else if(type == 'leave'){ div.style.color = 'red'; } document.body.appendChild(div);//将信息写到body上 } websocket.onopen = function(){//打开连接, console.log(websocket.readyState);//可查看连接状态 console.log('websocket open....'); document.getElementById('sendBtn').onclick = function(){//点击发送时,将信息send给ws服务器 var txt = document.getElementById('sendTxt').value; if(txt){//如果消息不为空,发送消息 websocket.send(txt); } } } websocket.onclose = function(){//关闭连接 console.log('websocket close....'); } websocket.onmessage = function(e){//接收消息,并格式化成JSON对象模式 console.log(e.data); var mes = JSON.parse(e.data); showMessage(mes.data,mes.type);//显示消息 } </script> </body>
这样,我们就可以打开多个浏览器窗口去尝试连接这个websocket服务器