websocket的定义
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
websocket的优势:
- 较少的控制开销。
- 更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。
- 保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。 - 可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
- 更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。
使用socket.io实现简单的聊天室
- 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>websocket聊天室</title>
<style>
#content{
width: 600px;
height: 300px;
border: 1px solid black;
}
.me{
color: green;
}
</style>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
let sock = io.connect("ws://localhost:8080");
sock.on("connect",()=>{
console.log("连接建立");
})
sock.on("disconnect",()=>{
console.log("连接断开");
})
window.onload = function(){
let ul = document.querySelector("#content");
let msg = document.querySelector("#msg");
let btn = document.querySelector("#btn");
sock.on("msg",function(str){
let li = document.createElement("li");
li.innerHTML = str;
ul.appendChild(li);
})
btn.onclick = function(){
let sendMsg = msg.value.replace(/(^\s+)|(\s+$)/g,"");
if(sendMsg.length !== 0){
sock.emit("msg",sendMsg);
let li = document.createElement("li");
li.innerHTML= sendMsg;
li.className = "me";
ul.appendChild(li);
msg.value = "";
}
}
}
</script>
</head>
<body>
<ul id="content"></ul>
<textarea id="msg" cols="80" rows="10"></textarea>
<input type="submit" value="发送" id="btn">
</body>
</html>
- nodejs服务器端的代码
const http = require("http");
const io = require("socket.io");
let httpServer = http.createServer();
httpServer.listen(8080);
let wsServer = io.listen(httpServer);
let sockArr = [];
wsServer.on("connection",sock=>{
sockArr.push(sock);
sock.on("disconnect",()=>{
let n = sockArr.indexOf(sock);
if(n!=-1){
sockArr.splice(n,1);
}
})
sock.on("msg",function(str){
sockArr.forEach(s=>{
if(s!=sock){
s.emit("msg",str);
}
})
})
setInterval(() => {
console.log(sockArr.length)
}, 1000);
})
网友评论