五分钟学会HTML5的WebSocket协议


Posted in HTML / CSS onNovember 22, 2019

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就写这么多,如有不足,欢迎多多指正!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 #HTML / CSS
HTML5 weui使用笔记
Nov 21 #HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 #HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 #HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 #HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 #HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 #HTML / CSS
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python中动态创建类实例的方法
2017/03/24 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
论文指导教师评语
2014/04/28 职场文书
2015小学师德工作总结
2015/07/21 职场文书
教师旷工检讨书
2015/08/15 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android