HTTP 协议有一个缺陷：通信只能由客户端发起！HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室！

WebSocket 是一种网络通信协议，很多高级功能都需要它！它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。其他特定包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

WebSocke聊天室功能实例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #box {
            width: 500px;
        }

        .container {
            height: 350px;
            border: 1px solid #ccc;
            overflow-y: auto;
        }

        .container .tips {
            text-align: center;
            justify-content: center;
            font-size: 12px;
            color: #ccc;
        }

        .container p:nth-child(1) {
            display: flex;
            justify-content: space-between;
        }

        p span:nth-child(1) {
            display: inline-block;
            width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        p span:nth-child(2) {
            max-width: 240px;
            background: limegreen;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            word-break: break-all;
            margin-left: 10px;
        }

        .container div {
            display: flex;
            justify-content: space-between;
        }

        .send {
            display: flex;
            justify-content: space-between;
        }

        .send input {
            flex: 1;
            height: 50px;
        }

        ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <!--
            如: 聊天室功能
            在websocket之前,通过ajax轮询的方式实现
            
            websocket: 双向实时通讯技术(服务器可以主动发送消息给,客户端可以主动发送消息给服务器)
        
            nodejs环境:
                1.进入nodejs官网,安装nodejs: https://nodejs.org/en/download/
                2.打开cmd, 输入: node -v  测试是否安装成功(出现版本号即安装成功,否则步骤3)
                3.配置环境变量: 计算机--属性--高级系统配置--环境变量--Path--将nodejs安装目录添加到Path后面,用分号与前面的Path分开
            
            启动服务器:
                在命令行输入: node wsServer.js
                    
        -->
    <div id="box">
        <div class="container">

        </div>
        <div class="send">
            <input type="text" name="" id="" value="" />
            <button type="button">发送消息</button>
        </div>
    </div>

    <script type="text/javascript">
        var oBox = document.querySelector(".container");
        var oVal = document.querySelector("input");
        var oSend = document.querySelector("button");

        // 1.创建连接()
        var ws = new WebSocket("ws://8.135.39.102:8080");

        // 2.连接已建立
        ws.onopen = function () {
            console.log("连接已建立");
        }

        // 4.接收消息
        ws.onmessage = function (ev) {
            var newDiv = document.createElement("div");
            if (ev.data.search("tips") != -1) {
                newDiv.innerHTML = ev.data;
                newDiv.className = "tips";
            } else {
                var data = JSON.parse(ev.data);
                var time = new Date().toLocaleTimeString();
                newDiv.innerHTML = `
                        <p>
                            <span>${data.nickname}</span>
                            <span>${data.msg}</span>
                        </p>
                        <p>${time}</p>
                    `
            }
            oBox.appendChild(newDiv);
            oBox.scrollTop = oBox.scrollHeight;
        }

        // 5.关闭连接
        ws.onclose = function () {
            console.log("连接已关闭");
        }

        oSend.onclick = function () {
            var val = oVal.value;
            if (val) {
                // 3.发送消息
                ws.send(val);
                oVal.value = "";
            }
        }
    </script>
</body>

</html>

 

版权声明：本文为yuanfanwo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yuanfanwo/p/14511689.html