簡體   English   中英

Quart python:從curl發送websocket廣播消息並顯示它

[英]Quart python : send websocket broadcast message from curl and display it

我是這樣編輯的:

我的 curl 命令是:

curl -d '{"key1":"value1", "key2":"value2"}' -H "Content-Type: application/json" -X POST http://localhost:5000/telepath

我想在每個客戶端上顯示此發布的數據。 我抓住了我可以在文檔中找到的東西,但這對我來說並不容易。

這是我的腳本:

from quart import Quart, render_template, websocket
from functools import partial, wraps
from quart import request, redirect, url_for, copy_current_websocket_context
import asyncio

app = Quart(__name__)

connected_websockets = set()

def collect_websocket(func):
    @wraps(func)
    async def wrapper(*args, **kwargs):
        global connected_websockets
        queue = asyncio.Queue()
        connected_websockets.add(queue)
        try:
            return await func(queue, *args, **kwargs)
        finally:
            connected_websockets.remove(queue)
    return wrapper

async def broadcast(message):
    for queue in connected_websockets:
        await queue.put(message)

@app.route('/')
async def index():
    return await render_template('index.html')


@app.websocket('/ws')
@collect_websocket
async def ws(queue):
    print("$ $ $",queue)
    while True:
        data = await websocket.receive()
        print("\n {}".format(data))
        await websocket.send(f"echo {data}")



@app.route('/telepath', methods=['POST'])
async def telepath():
    global connected_websockets    
    data = await request.get_json()
    for queue in connected_websockets:
        await queue.put(data["key1"])
    return "\n Request Processed.\n"



if __name__ == '__main__':
    app.run(port=5000)

和模板:

<!doctype html>
<html>
  <head>
    <title>My TEST</title>
  </head>
  <body>
    <input type="text" id="message">
    <button>Send</button>
    <ul></ul>
    <script type="text/javascript">
      var ws = new WebSocket('ws://' + document.domain + ':' + location.port + '/ws');
      ws.onmessage = function (event) {
        var messages_dom = document.getElementsByTagName('ul')[0];
        var message_dom = document.createElement('li');
        var content_dom = document.createTextNode('Received: ' + event.data);
        message_dom.appendChild(content_dom);
        messages_dom.appendChild(message_dom);
      };

      var button = document.getElementsByTagName('button')[0];
      button.onclick = function() {
        var content = document.getElementsByTagName('input')[0].value;
        ws.send(content);
      };


    document.addEventListener('DOMContentLoaded', function() {
    var es = new EventSource('/telepath');
    es.onmessage = function (event) {
        var messages_dom = document.getElementsByTagName('ul')[0];
        var message_dom = document.createElement('li');
        var content_dom = document.createTextNode('Received: ' + event.data);
        message_dom.appendChild(content_dom);
        messages_dom.appendChild(message_dom);
      };

    
    });


    let socket = new WebSocket("ws://localhost:5000/ws");

    socket.onmessage = function(event) {
        alert(`Data received: ${event.data}`);
        
    };

    
    
    </script>
  </body>
</html>

我的最終目標是身份驗證,並針對可以從服務器接收私人消息的人。

無法在 mozilla 或 chrome 客戶端上通過 curl 傳輸發布的數據。

在您的collect_websocket裝飾器中,您將queue參數傳遞給 websocket 處理程序( return await func(queue, *args, **kwargs) ),而您的 websocket 處理程序不接受任何參數( async def ws() )。 這會導致您看到的錯誤。

看起來您的ws_v2 websocket 處理程序設置為與collect_websocket裝飾器( async def ws_v2(queue) )一起使用,所以我認為您可以切換到使用它並像這樣重寫心靈感應,

@app.route('/telepath', methods=['POST'])
async def telepath():
    global connected_websockets    
    data = await request.get_json()
    for queue in connected_websockets:
        await queue.put(data["key1"])
return {}

請注意,您不需要在/telepath路由中創建任何隊列,因為這是由collect_websocket裝飾器完成的,並且每個 websocket 連接都需要一個隊列。 您也不需要等待ws_v2處理程序,它會在有新的 websocket 連接時被調用。

對於身份驗證,我建議您從Quart-Auth開始(我是該庫的作者)。


編輯:按要求提供完整代碼,

import asyncio
from functools import partial, wraps

from quart import (
    copy_current_websocket_context, Quart, render_template, 
    request, websocket
)

app = Quart(__name__)

connected_websockets = set()

def collect_websocket(func):
    @wraps(func)
    async def wrapper(*args, **kwargs):
        global connected_websockets
        queue = asyncio.Queue()
        connected_websockets.add(queue)
        try:
            return await func(queue, *args, **kwargs)
        finally:
            connected_websockets.remove(queue)
    return wrapper

async def broadcast(message):
    global connected_websockets 
    for queue in connected_websockets:
        await queue.put(message)

@app.route('/')
async def index():
    return await render_template('index.html')

@app.websocket('/ws')
@collect_websocket
async def ws(queue):
    await websocket.accept()
    while True:
        data = await queue.get()
        await websocket.send_json(data)

@app.route('/telepath', methods=['POST'])
async def telepath():   
    data = await request.get_json()
    await broadcast(data)
    return {}

if __name__ == '__main__':
    app.run(port=5000)

和模板,

<!doctype html>
<html>
  <head>
    <title>My TEST</title>
  </head>
  <body>
    <ul></ul>
    <script type="text/javascript">
      var ws = new WebSocket('ws://' + document.domain + ':' + location.port + '/ws');
      ws.onmessage = function (event) {
        const messagesDOM = document.getElementsByTagName('ul')[0];
        const messageDOM = document.createElement('li');
        const message = JSON.parse(event.data).message;
        const contentDOM = document.createTextNode('Received: ' + message);
        messageDOM.appendChild(contentDOM);
        messagesDOM.appendChild(messageDOM);
      };
    </script>
  </body>
</html>

然后與 curl 一起使用,

curl -H "content-type: application/json" -d '{"message": "Hello"}' localhost:5000/telepath

請注意,服務器會將收到的所有 JSON 數據發送給客戶端,但客戶端僅使用message密鑰。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM