网页制作

五分钟学会HTML5的WebSocket协议
网页制作 2024/11/15 佚名
3 2

1、背景

很多网站为了实现推送技术，所用的技术都是Ajax轮询。轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5新增的一些新协议WebSocket,可以提供在单个TCP连接上提供全双工，双向通信，能够节省服务器资源和带宽，并且能够实时进行通信。

2、WebSocket介绍

传统的http也是一种协议，WebSocket是一种协议，使用http服务器无法实现WebSocket，

2.1.浏览器支持情况

基本主流浏览器都支持

五分钟学会HTML5的WebSocket协议

2.2.优点

相对于http有如下好处：

1.客户端与服务器只建立一个TCP连接，可以使用更少的连接。

2.WebSocket服务器端可以主动推送数据到客户端，更灵活高效。

3.更轻量级的协议头，减少数据传送量。

对比轮训机制

五分钟学会HTML5的WebSocket协议

3、WebSocket用法

我们了解WebSocket是什么，有哪些优点后，怎么使用呢？

3.1.WebSocket创建

WebSocket使用了自定义协议，url模式与http略有不同，未加密的连接是ws://，加密的连接是wss://，WebSocket实例使用new WebSocket()方法来创建，

var ws = new WebSocket(url, [protocol] );

第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

3.2.WebSocket属性

当创建ws对象后，readyState为ws实例状态，共4种状态

0 表示连接尚未建立。

1 表示连接已建立，可以进行通信。

2 表示连接正在进行关闭。

3 表示连接已经关闭或者连接不能打开。

Tips：在发送报文之前要判断状态，断开也应该有重连机制。

3.3.WebSocket事件

在创建ws实例对象后，会拥有以下几个事件，根据不同状态可在事件回调写方法。

  • ws.onopen 连接建立时触发
  • ws.onmessage 客户端接收服务端数据时触发
  • ws.onerror 通信发生错误时触发
  • ws.onclose 连接关闭时触发
ws.onmessage = (res) => {
  console.log(res.data);
};

ws.onopen = () => {
  console.log('OPEN...');
};

ws.onclose=()=>{
 console.log('CLOSE...');
}

3.4.WebSocket方法

  • ws.send() 使用连接发送数据(只能发送纯文本数据)
  • ws.close() 关闭连接

4、Demo演示

了解WebSocket的一些API之后，趁热打铁，做一个小案例跑一下。

4.1.Node服务器端

WebSocket协议与Node一起用非常好，原因有以下两点：

1.WebSocket客户端基于事件编程与Node中自定义事件差不多。

2.WebSocket实现客户端与服务器端长连接，Node基本事件驱动的方式十分适合高并发连接

创建一个webSocket.js如下：

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        ws.send('我收到了' + message);
    });
});

打开windows命令窗口运行

五分钟学会HTML5的WebSocket协议

4.2.HTML客户端

新建一个index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket小Demo</title>
</head>
<body>
    <div class="container">
        <div>
            <input type="text" id="msg">
            <button onclick="sendMsg()">发送报文</button>
        </div>
    </div>
    <script>
        const ws = new WebSocket('ws://localhost:8080');
        ws.onmessage = (res) => {
            console.log(res);
        };
        ws.onopen = () => {
            console.log('OPEN...');
        };
        ws.onclose = () => {
            console.log('CLOSE...');
        }
        function sendMsg() {
            let msg = document.getElementById('msg').value;
            ws.send(msg);
        }
    </script>
</body>

打开浏览器依次输入字符1,2,3，每次输入完点击发送报体，可见在ws.onmessage事件中res.data中返回来我们发的报文

五分钟学会HTML5的WebSocket协议

5、问题与总结

以上只是简单的介绍了下WebSocket的API与简单用法，在处理高并发，长连接这些需求上，例如聊天室，可能WebSocket的http请求更加合适高效。

但在使用WebSocket过程中发现容易断开连接等问题，所以在每次发送报文前要判断是否断开，当多次发送报文时，由于服务器端返回数据量不同，返回客户端前后顺序也不同，所以需要在客户端收到上一个报文返回数据后再发送下一个报文，为了避免回调嵌套过多，通过Promise ，async ,await等同步方式解决。关于WebSocket就写这么多，如有不足，欢迎多多指正！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
HTML5,WebSocket协议
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“五分钟学会HTML5的WebSocket协议”

暂无“五分钟学会HTML5的WebSocket协议”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com