怎么制作网站游戏,png素材网,哪里学网站建设推广,建设银行网站用户名是多少1、背景 在开发一些前端页面的时候#xff0c;总是能接收到这样的需求#xff1a;如何保持页面并实现自动更新数据呢#xff1f;以往的常规做法#xff0c;是前端使用定时轮询后端接口#xff0c;获取响应后重新渲染前端页面#xff0c;这种做法虽然能达到类似的效果总是能接收到这样的需求如何保持页面并实现自动更新数据呢以往的常规做法是前端使用定时轮询后端接口获取响应后重新渲染前端页面这种做法虽然能达到类似的效果但是依然有很多缺点缺点就不在这里说了感兴趣的小伙伴可以自行查阅一下。现在让我们回忆一下我们有没有想过是否有一种技术服务器可以主动将数据推送给客户端进行渲染而不再是客户端向服务器发出请求等待返回结果呢接下来让我们一起了解weboskcet。 2、什么是websocket websocket是HTML5规范的一个部分它借鉴了socket的思想实现了浏览器与服务器全双工通信达到了即时通信的效果。websocket协议基于TCP协议实现包含初始的握手过程以及后续的多次数据帧双向传输过程避免服务器频繁打开多个HTTP连接从而能更好的节省服务器资源和带宽提高工作效率与资源利用率 3、工作原理 websocket的通信规范首先浏览器通过HTTP协议发出websocket的连线请求服务器进行响应这个过程称为握手握手完成后客户端和服务器之间建立一个类似TCP的连接使用websocket协议从而实现它们之间的通信。 4、与HTTP的关系 相同点 1、都是基于TCP协议且都是可靠性传输协议
2、都是应用层协议
3、websocket支持两种资源标志符ws默认80端口与wss默认443端口类似HTTP和HTTPS 不同点 1、websocket是双向通信协议HTTP是单向的
2、websocket是需要浏览器和服务器握手进行建立连接的HTTP是浏览器发起向服务器的连接服务器预先并不知道这个连接。 联系点 websocket在建立握手时数据是通过HTTP传输的建立之后的数据传输将不再需要HTTP协议而是websocket协议 5、websocket创建与常用的属性方法 5.1 websocket属性 // 创建websocket
var ws new WebSocket(ws://www.example.com);if(ws.readyState ws.CONNECTING){console.log(连接正在打开);}ws.onopen function () {ws.send(consumerId);if(ws.readyState ws.CONNECTING){console.log(连接正在打开1);}if(ws.readyState ws.OPEN){console.log(连接已打开);}console.log(已经建立连接);// 关闭连接// ws.close()};// 连接关闭时触发ws.onclose function () {if(ws.readyState ws.CLOSED){console.log(连接已关闭)}};// 连接错误ws.onerror function () {console.log(连接错误);}; 5.2 weboscket事件 5.3 客户端的简单示例 // 创建websocket
var ws new WebSocket(ws://www.example.com);// 连接成功时触发
ws.onopen function(e) {console.log(Connectiong open ...);// 发送消息ws.send(Hello WebSocket);
};// 接收消息时触发
ws.onmessage function(e) {console.log(Received Message: e.data);ws.close();
};// 关闭连接时触发
ws.onclose function(e) {console.log(Connection closed);
};// 出现错误时触发
ws.onerror function(e) {console.log(error);
}; 5.4 服务端的简单示例 # 创建websocket服务端
from tornado.websocket import WebSocketHandlerclass wsHandler(WebSocketHandler):# 保存连接的用户用于后续推送消息connect_users set()# 已与客户端建立连接def open(self):print(开启WebSocket opened)self.connect_users.add(self)# 关闭客户端连接def on_close(self):self.connect_users.remove(self)# 接收到消息def on_message(self, message): self.write_message(接收到客户端的消息{}.format(message))# 所有用户发送消息classmethoddef send_demand_updates(cls, message):# 使用classmethod可以使类方法在调用的时候不用进行实例化# 给所有用户推送消息此处可以根据需要修改为给指定用户进行推送消息for user in cls.connect_users:user.write_message(message)# 允许WebSocket的跨域请求def check_origin(self, origin):return Trueif __name__ __main__:# 调用wsHandler。send_demand_updates(服务端发送给客户端的消息) 注意示例中使用python语言需依托tornado框架搭建后端web服务端文章中不再说明如何搭建服务端感兴趣的小伙伴可自行尝试。tornado内置websocket模块能更简单的支持使用websocket。 6、总结 websocket提供了一种低延迟、高性能的双向数据通信不同与web开发的请求、处理、等待响应模式它是客户端、服务端因为同一个连接直接就可以数据互传的模式特别适合实时数据交互的应用进行开发。 实用点 1、websocket连接建立后后续的数据传输都将以帧序列的形式传输 2、在客户端断开websocket连接或服务端中断连接前不需要客户端和服务端重新发起连接请求 3、在海量并发、客户端与服务器交互负载流量大的情况下节省网络带宽资源的消耗且客户端发送与接收消息都是在同一个持久连接上进行实现了“真长连接”真正的实现即时通信。 文章转载自京东云开发者
原文链接https://www.cnblogs.com/Jcloud/p/17819093.html
