HTML5中的WebSocket协议有什么用
这篇文章给大家分享的是有关HTML5中的WebSocket协议有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
1、背景
很多网站为了实现推送技术，所用的技术都是Ajax轮询。轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5新增的一些新协议WebSocket,可以提供在单个TCP连接上提供全双工，双向通信，能够节省服务器资源和带宽，并且能够实时进行通信。
2、WebSocket介绍
传统的http也是一种协议，WebSocket是一种协议，使用http服务器无法实现WebSocket，
2.1.浏览器支持情况
基本主流浏览器都支持
2.2.优点
相对于http有如下好处：
1.客户端与服务器只建立一个TCP连接，可以使用更少的连接。
2.WebSocket服务器端可以主动推送数据到客户端，更灵活高效。
3.更轻量级的协议头，减少数据传送量。
对比轮训机制
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命令窗口运行
4.2.HTML客户端
新建一个index.html页面:
webSocket小Demo 打开浏览器依次输入字符1,2,3，每次输入完点击发送报体，可见在ws.onmessage事件中res.data中返回来我们发的报文。
感谢各位的阅读！关于"HTML5中的WebSocket协议有什么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
