WebSocket基本使用

最新推荐文章于 2024-08-12 18:13:42 发布

qq_24404893

最新推荐文章于 2024-08-12 18:13:42 发布

阅读量135

点赞数

文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/qq_24404893/article/details/130299425

版权

WebSocket是为了解决HTTP协议的服务器主动推送问题而设计的协议，它允许在单个TCP连接上进行双向通信。相比HTTP的轮询方式，WebSocket更高效，能实时传输数据。在前端，可以通过创建WebSocket对象，连接服务器，并设置onopen、onerror、onmessage和onclose事件来实现通信。关闭连接和发送数据则分别通过close()和send()方法完成。

摘要由CSDN通过智能技术生成

一、简介

WebSocket是一种网络通信协议。

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

已经有了HTTP协议，为什么需要WebSocket?

因为HTTP协议有一个缺陷：通信只能由客户端发起，HTTp协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器由连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时间，就发出一个询问，了解服务器有没有新的信息。轮询的效率低，非常浪费资源（因为必须不停的连接，或者HTTP连接始终打开）。因此WebSocket应运而生。

二、基本使用

1.简单结构如下

    <div>
       <ul class="msgs">
            <li>消息内容</li>
        </ul>
        <div>
            <input type="text" class="con">
            <button class="close">关闭连接</button>
        </div>
    </div>

2.需要得到后端的支持，仅凭前端无法实现

以下代码是WebSocke的主要方法的使用：

        var ul = document.querySelector('.msgs');
        var input = document.querySelector('.con');
        var close = document.querySelector('.close');
        // 连接服务器
        var ws = new WebSocket("与后端约定好的地址");
        // 连接成功时调用
        ws.onopen = function() {
            alert('连接成功')
        }
        // 连接失败时调用
        ws.onerror = function() {
            alert('连接失败')
        }
        // 接收消息时调用
        ws.onmessage = function(MessageEvent) { // 返回的数据
            console.log(MessageEvent);
            var _li = document.createElement("li");
            _li.innerHTML = MessageEvent.data;
            ul.appendChild(_li);
        }
        // 发送数据
        input.onkeydown = function() {
           // send(); 发送数据  WebSocket通过send()方法向服务器端发送请求
           ws.send(this.value); 
        }
        // 关闭连接
        close.onclick = function() {
            if (ws.readyState === WebSocket.OPEN) {
                ws.close();
            }
        }