websocket学习

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);
})

最后编辑于：2019.01.10 15:53:38