1

我问了这些 关于sanic 中的 websockets 的问题。这是一个跟进。

下面让我向我的 websocket 客户端广播消息：

from sanic import Sanic, response
from sanic.websocket import WebSocketProtocol
import asyncio
import time

app = Sanic()

@app.websocket('/feed')
async def feed(request, ws):
    while True:
        now = time.time()
        data = f'message: {now}'
        print(data)
        await ws.send(data)
        await asyncio.sleep(1)

@app.route('/')
async def handle_request(request):
    return response.html("""
    <html><head>
    <script>
    const ws = new WebSocket("ws://" + location.host + '/feed');
    ws.onmessage = event => {
      let e = event;
      console.log(e.data);
      let out = document.getElementById('out');
      out.innerHTML += `<li><p>${e.data}</p></li>`;
    }
    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();
      let message = document.querySelector("#in").value;
      ws.send(message);
      document.querySelector("#in").value = "";
    })
    </script>
    </head>
      <body><h1>Main</h1>
        <div id="in"><form><input type="text" method="post"></form></div>
        <div><ul id="out"></ul></div>
     </body>
    </html>
    """)

app.run(host="0.0.0.0", port=8000)

我可以确认服务器既定期向客户端传递消息，又能够接收某种返回的消息。

在服务器上：

[2019-08-12 22:06:27 -0500] - (sanic.access)[INFO][127.0.0.1:49028]: GET http://localhost:8000/  200 714
message: 1565665587.4367297
message: 1565665588.4373734
message: 1565665589.4389973
message: 1565665590.440603
message: 1565665591.4414358
message: 1565665592.441888
message: 1565665593.443465
[2019-08-12 22:06:34 -0500] - (sanic.access)[INFO][127.0.0.1:49036]: GET http://localhost:8000/  200 714
message: 1565665594.362771
message: 1565665595.3643198
message: 1565665596.3655813
message: 1565665597.3671694

在客户端：

在此处输入图像描述

但是，由于以下几个原因，这对我来说没有意义：

  1. 当我提交表单时，我实际上看不到提交的内容，只是有一个 GET 请求。
  2. 我看到一个 GET 请求，但我的表单明确表示 POST。
  3. event.preventDefault()已使用，我仍然在表单提交中看到完整的页面刷新。

但更重要的是，我真正想要的是双向通信。所以，除了 just 之外ws.send(data)，我还要new = await ws.recv()在方法中捕获输入。

@app.websocket('/feed')
async def feed(request, ws):
    while True:
        now = time.time()
        data = f'message: {now}'
        print(data)
        await ws.send(data)
        new = await ws.recv()  # this is the only change
        print(new)
        await asyncio.sleep(1)

但现在，我不再连续向客户端发送数据。ws.recv()相反，即使客户端没有发送任何内容，进程也会挂起，等待我。

[2019-08-12 22:13:52 -0500] [12920] [INFO] Starting worker [12920]
[2019-08-12 22:13:56 -0500] - (sanic.access)[INFO][127.0.0.1:49086]: GET http://localhost:8000/  200 714
message: 1565666037.0688074
[2019-08-12 22:14:03 -0500] - (sanic.access)[INFO][127.0.0.1:49090]: GET http://localhost:8000/  200 714

message在我再次提交表单之前不再发送。

如何进行双向通信，将数据传回/feed端点，但无需等待即可连续进行？

4

1 回答 1

2

您需要将消费者和生产者分开，有一个示例如何做到这一点：

from sanic import Sanic, response
import asyncio
import time

app = Sanic()


async def _consumer_handler(ws):
    print('consumer_handler')
    while True:
        message = await ws.recv()
        print('message arrived', message)


async def _producer_handler(ws):
    print('producer_handler')
    while True:
        now = time.time()
        data = f'message sent: {now}'
        print(data)
        await ws.send(data)
        await asyncio.sleep(1)


@app.websocket('/feed')
async def feed(request, ws):
    consumer_task = asyncio.ensure_future(
        _consumer_handler(ws))
    producer_task = asyncio.ensure_future(
        _producer_handler(ws))
    done, pending = await asyncio.wait(
        [consumer_task, producer_task],
        return_when=asyncio.FIRST_COMPLETED,
    )
    for task in pending:
        task.cancel()


@app.route('/')
async def handle_request(request):
    return response.html("""
    <html><head>
    </head>
      <body><h1>Main</h1>
        <div><form><input id="in" type="text" method="post"></form></div>
        <div><ul id="out"></ul></div>
     </body>
     <script>
    const ws = new WebSocket("ws://" + location.host + '/feed');
    ws.onmessage = event => {
      let e = event;
      console.log(e.data);
      let out = document.getElementById('out');
      out.innerHTML += `<li><p>${e.data}</p></li>`;
    }
    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();
      let message = document.querySelector("#in").value;
      ws.send(message);
      document.querySelector("#in").value = "";
    })
    </script>
    </html>
    """)

app.run(host="0.0.0.0", port=8000)

要在消费者和生产者之间进行通信，您需要使用 pubsub，或者定期检查新消息（并且您需要将消息存储在某个地方，例如可以使用 redis）。

一些有用的链接：

于 2019-08-13T18:35:27.737 回答