WebSocket网络通信协议
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服务器
浙公网安备 33010602011771号