websocket介绍并模拟股票数据推流

简介: websocket介绍并模拟股票数据推流

Websockt概念

Websockt是一种网络通信协议,允许客户端和服务器双向通信。最大的特点就是允许服务器主动推送数据给客户端,比如股票数据在客户端实时更新,就能利用websocket。

Websockt和http协议一样,并不是设置在linux内核中,而是通过用户空间的应用程序来实现和处理。

http网址的格式:协议://域名/路径。如:Example Domain

websocket网址的格式:ws://域名/路径 或 wss://域名/路径。如:ws://www.example.com/chat。

Websocket与http的关联

1、基于HTTP协议的握手:WebSocket协议的握手过程是基于HTTP协议的。在建立WebSocket连接之前,客户端和服务器之间会进行一次HTTP握手,这是为了协商和确认使用WebSocket协议进行通信。

2、共享同一端口:WebSocket协议使用HTTP协议的80端口(或443端口,用于加密连接),这意味着WebSocket连接可以通过与HTTP服务器共享同一端口来进行通信。这样可以避免在网络上开启新的端口,降低了网络配置的复杂性。

Websocket与http对比

优点

实时性:WebSocket支持双向通信,服务器可以主动推送数据给客户端,实现实时更新和推送功能。

较低的延迟:WebSocket建立一次连接后,可以保持长时间的连接状态,避免了每次请求都要建立新的连接的开销,从而减少了延迟。

较小的数据开销:WebSocket使用二进制消息传输,相对于HTTP的文本数据传输,可以减少数据包的大小,降低网络传输开销。

更少的网络流量:由于WebSocket采用长连接,不需要频繁的请求和响应,可以减少网络流量和负载。

缺点

兼容性问题:WebSocket是HTML5的一部分,相对于HTTP,对于一些低版本的浏览器和服务器来说,支持程度可能较低。

需要服务器端支持:WebSocket需要服务器端支持实现双向通信,而有些服务器可能没有提供WebSocket的支持。

协议复杂性:相对于HTTP来说,WebSocket的协议相对复杂一些,实现和维护的成本可能较高。

Websocket的握手

与http握手的区别

下图是websocket的握手报文案例。与http握手报文的核心区别是两处红框部分是否是Upgrade和websocket。

Websocket的握手流程

1.浏览器发送握手报文。

2.服务器解析出sec-websocket-key

3.sec-websocket-key与GUID字符串联合成新字符串。

GUID是一组固定的字符串,在websocket的官方文档里有规定。

4.用哈希算法对新字符串进行哈希

5.对哈希值转为base64格式,生成value

6.把value配握手返回报文中进行返回

仿股票数据推流

股票数据的推流的特点:客户端连接上服务器之后,服务器就会定时往客户端发送更新过的股票数据。

下图实现了一个简易版的服务器,能定时给连接上的客户端推送数据,当客户端尝试发送数据的时候会断开连接。

import asyncio
import websockets
async def push_price(websocket, path):
  while True:
    price = "price = 299.9"
    await websocket.send(price)
    try:
    # 接收消息
      message = await asyncio.wait_for(websocket.recv(), timeout=1)
    # 如果接收到消息,立即断开连接
      if message:
        await websocket.close()
        break
    except:
      pass
start_server = websockets.serve(push_price, None, 8765) //返回一个协程对象
                                                        //该对象的任务函数是push_price
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

客户端

<html>
<head>
    <script>
        let ws;
        function doConnect(addr) {
            ws = new WebSocket("ws://" + addr);
            ws.onopen = () => {
                document.getElementById("log").value += (" Connection opened\n");
            };
            ws.onmessage = (event) => {
                document.getElementById("log").value += (" Receive: " + event.data + "\n\n"); // JSON.stringify()
            };
            ws.onclose = () => {
                document.getElementById("log").value += (" Connection closed\n");
            };
        }
        document.addEventListener("DOMContentLoaded", (event) => {
            document.getElementById("btn_connect").onclick = () => {
                let server_addr = document.getElementById("server_addr").value;
                doConnect(server_addr);
            };
            document.getElementById("btn_send").onclick = () => {
                let msg = document.getElementById("message").value;
                ws.send(msg);
                document.getElementById("log").value += (" Send: " + msg + "\n");
            };
        });
    </script>
</head>
<body>
<div id="header">
    <h1 align="left">WebSocket Client</h1>
    Server: <input id="server_addr" type="text" value="192.168.232.132:8888">
    <input id="btn_connect" type="button" value="Connect!"><br/><br/>
    Message: <input id="message" type="text" value="">
    <input id="btn_send" type="button" value="Send"><br/><br/>
    <textarea cols="250" id="log" rows="50"></textarea>
</div>
</body>
</html>
~                                                                                                                                                                                                            
~                                                                                                                                                                                                            
~

运行结果

目录
相关文章
|
7月前
|
网络协议 C++
websocket数据帧格式
websocket数据帧格式
134 2
|
监控 前端开发 Cloud Native
解决WebSocket通信:前端拿不到最后一条数据的问题
解决WebSocket通信:前端拿不到最后一条数据的问题
251 0
|
2月前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
91 0
|
5月前
|
前端开发 JavaScript UED
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
【7月更文挑战第16天】在前后端分离的Web开发中,WebSocket解决了实时数据交换的问题。使用Python的Flask和Flask-SocketIO库,后端创建WebSocket服务,监听并广播消息。前端HTML通过JavaScript连接到服务器,发送并显示接收到的消息。WebSocket适用于实时通知、在线游戏等场景,提升应用的实时性和用户体验。通过实战案例,展示了如何实现这一功能。
318 2
|
7月前
|
前端开发 Java API
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
1394 0
|
关系型数据库 MySQL PHP
php使用webSocket实现Echarts长连接自动刷新的解决方案(3):获取读取数据库数据队列进行实时刷新
php使用webSocket实现Echarts长连接自动刷新的解决方案(3):获取读取数据库数据队列进行实时刷新
165 0
|
JSON 关系型数据库 MySQL
php使用webSocket实现Echarts长连接自动刷新的解决方案(2):后端服务端代码返回json数据
php使用webSocket实现Echarts长连接自动刷新的解决方案(2):后端服务端代码返回json数据
165 0
|
JSON 前端开发 JavaScript
php使用webSocket实现Echarts长连接自动刷新的解决方案(1):前端获取后端JSON数据
php使用webSocket实现Echarts长连接自动刷新的解决方案(1):前端获取后端JSON数据
164 0
|
JSON JavaScript 数据库
基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)》主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配合上数据库的数据储存,我们就可以实现一个简易版的 Web 聊天工具了,有空的朋友可以自己尝试下实现,那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了,请大家接着往下看。
993 0
|
JSON JavaScript 数据库
通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)》主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配合上数据库的数据储存,我们就可以实现一个简易版的 Web 聊天工具了,有空的朋友可以自己尝试下实现,那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了,请大家接着往下看。
1008 0