怎么在HTML5中使用WebSocket协议

　　介绍

怎么在HTML5中使用WebSocket协议吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强> 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实例使用<代码>新WebSocket() 方法来创建,

var  ws =, new  WebSocket (url,,(协议),),

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

<强> 3.2。WebSocket属性

当创建ws对象后,判别为ws实例状态,共4种状态

0表示连接尚未建立。

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

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

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

提示:在发送报文之前要判断状态,断开也应该有重连机制。

<强> 3.3。WebSocket事件

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

<李>

ws。onopen连接建立时触发

<李>

ws。onmessage客户端接收服务端数据时触发

<李>

ws。onerror通信发生错误时触发

<李>

ws。onclose连接关闭时触发

ws.onmessage =, (res),=祝辞,{ 　　console.log才能(res.data); 　　}; 　　 　　ws.onopen =,(),=祝辞,{ 　　console.log才能(& # 39;开放……& # 39;); 　　}; 　　 　　ws.onclose=()=祝辞{ 　　,console.log(& # 39;密切…& # 39;); 　　}

<强> 3.4。WebSocket方法

<李>

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

<李>

ws.close()关闭连接

<强> 4,演示演示

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

<强> 4.1.Node服务器端

WebSocket协议与节点一起用非常好,原因有以下两点:

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

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

创建一个WebSocket。js如下:

const  WebSocketServer =,要求(& # 39;ws # 39;) .Server; 　　const  wss =, new  WebSocketServer({,端口:8080年,}); 　　wss.on(& # 39;连接# 39;,,function  (ws), { 　　,,,console.log (& # 39; client 连接# 39;); 　　,,,ws.on(& # 39;消息# 39;,,function (消息),{ 　　,,,,,,,ws.send(& # 39;我收到了& # 39;,+,消息); 　　,,,}); 　　});

打开窗户命令窗口运行

怎么在HTML5中使用WebSocket协议

<强> 4.2.HTML客户端

新建一个索引。html页面

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title> webSocket小Demo 　　& lt;/head> 　　& lt; body> 　　,,,& lt; div 类=癱ontainer"比; 　　,,,,,,,& lt; div> 　　,,,,,,,,,,,& lt; input 类型=皌ext", id=癿sg"比; 　　,,,,,,,,,,,& lt; button  onclick=皊endMsg()“在发送报文& lt;/button> 　　,,,,,,,& lt;/div> 　　,,,& lt;/div> 　　,,,& lt; script> 　　,,,,,,,const  ws =, new  WebSocket (& # 39; ws://localhost: 8080 & # 39;); 　　,,,,,,,ws.onmessage =, (res),=祝辞,{ 　　,,,,,,,,,,,console.log (res); 　　,,,,,,,}; 　　,,,,,,,ws.onopen =,(),=祝辞,{ 　　,,,,,,,,,,,console.log(& # 39;开放……& # 39;); 　　,,,,,,,}; 　　,,,,,,,ws.onclose =,(),=祝辞,{ 　　,,,,,,,,,,,console.log(& # 39;密切…& # 39;); 　　,,,,,,,} 　　,,,,,,,function  sendMsg (), { 　　,,,,,,,,,,,let  msg =, . getelementbyid(& # 39;味精# 39;)value; 　　,,,,,,,,,,,ws.send(味精); 　　,,,,,,,} 　　,,,& lt;/script> 　　null

怎么在HTML5中使用WebSocket协议