websocket协议详解,js中websocket协议

　　1、背景

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

　　2、WebSocket介绍

　　传统的http也是一个协议，WebSocket是一个协议，WebSocket不能用http服务器来实现。

　　2.1.浏览器支持情况

　　基本浏览器都支持。

　　2.2.优点

　　与http相比，它有以下优点：

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

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

　　3.更轻的协议报头以减少数据传输。

　　比较轮换训练机制

　　3、WebSocket用法

　　在我们知道WebSocket是什么，它的优点是什么之后，我们该如何使用它呢？

　　3.1.WebSocket创建

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

　　var ws=new WebSocket(url，[协议])；第一个参数url，它指定连接的URL。第二个参数protocol是可选的，它指定了可接受的子协议。

　　3.2.WebSocket属性

　　创建ws对象时，readyState是ws实例状态，它有四种状态。

　　0表示尚未建立连接。

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

　　2表示连接正在关闭。

　　3表示连接已经关闭或无法打开。

　　温馨提示：发送消息前，要判断状态。还应该有断开的重连机制。

　　3.3.WebSocket事件

　　ws实例对象创建后，会有以下事件，其中方法可以根据不同的状态回调。

　　当ws.onopen连接建立时触发ws.onmessage，当客户端收到服务器数据时触发ws.onerror通信，当ws.onclose连接发生时触发ws . on message=(RES)={ console . log(RES . data)；};ws . on OPEN=()={ console . log( OPEN . ));};ws . on CLOSE=()={ console . log( CLOSE . ));}3.4.WebSocket方法

　　Ws.send()使用连接发送数据(只能发送纯文本数据)ws.close()关闭连接4、Demo演示。

　　了解了WebSocket的一些API后，趁热打铁，做个小案例来运行。

　　4.1.Node服务器端

　　WebSocket协议与Node配合得很好，原因有两个：

　　1.WebSocket客户端基于事件的编程类似于Node中的自定义事件。

　　2.WebSocket实现了客户端和服务器的长连接，节点的基本事件驱动模式非常适合高并发连接。

　　创建webSocket.js，如下所示：

　　const WebSocketServer=require( ws )。服务器；const WSS=new WebSocketServer({ port:8080 })；wss.on(连接，函数(ws) { console.log(客户端连接)；Ws.on (message ，function (message) {ws.send(我收到了消息)；});});打开windows命令窗口运行。

　　4.2.HTML客户端

　　创建新的index.html页面。

　　！doctype HTML HTML lang= en Head meta charaset= UTF-8 title web socket small Demo/title/Head div class= container div input type= text id= msg button onclick= sendmsg() send message/button/div/div script const ws=new web socket( ws://localhost:8080))；ws . on message=(RES)={ console . log(RES)；};ws . on OPEN=()={ console . log( OPEN . ));};ws . on CLOSE=()={ console . log( CLOSE . ));}函数send msg(){ let msg=document . getelementbyid( msg )。价值；ws . send(msg)；} /script/body打开浏览器，依次输入字符1、2、3。每次输入后点击发送报体，显示我们发送的消息在ws.onmessage事件中以res.data返回。

　　5、问题与总结

　　以上只是简单介绍了WebSocket的API和简单用法。在处理聊天室等高并发、长连接的需求时，WebSocket的http请求可能更合适、更高效。

　　但是在使用WebSocket的过程中发现很容易断线，所以在发送消息之前需要判断是否断线。多次发送一条消息时，由于服务器返回的数据量不同，返回客户端前后的顺序也不同，所以客户端需要在接收到上一条消息返回的数据后再发送下一条消息。为了避免过多的嵌套回调，采用了Promise、Async、Await等同步方法来解决。关于WebSocket就写这么多了。如有不足之处，请指正！

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。