Пример бутылки Websockets, которая обновляется каждые несколько секунд - PullRequest
Новая
       35

Пример бутылки Websockets, которая обновляется каждые несколько секунд

0 голосов
/ 26 февраля 2019

Поскольку я пытаюсь понять веб-сокеты с минимумом знаний JavaScript, я сталкиваюсь с серьезными пробелами в моем понимании.Чистый пример выглядит как Пример бутылки websockets

, и пример сервера websockets и клиента там работает для меня.Но я хотел, например, обновлять время каждые 10 секунд на HTML-клиенте.Так я только что сделал на сервере.

while True:
    wsock.send("Time: " + str(datetime.datetime.now()))
    time.sleep(10)

Время показывает один раз, но никогда не обновляется.Пытаясь сделать это для проекта Raspberry Pi, я наткнулся на пример nodejs, который обновляет значения датчиков;в этом примере есть некоторый код Jquery, который, как я думал, я мог бы адаптировать к коду HTML-файла в примере с бутылкой ... Они используют Jquery .data, чтобы «подключиться» к элементу таблицы, который может обновиться. NodeJS Обновление примера weosockets

Но я не могу сделать скачок, чтобы адаптировать этот шаблон Jquery к бутылке.Если бы у кого-то было время просто отрывок, возможно, это стало бы очевидным.Спасибо.

1 Ответ

0 голосов
/ 08 марта 2019

Люди склонны слишком усложнять веб-сокеты.Я люблю Gevent, потому что он очень прост в реализации.Однако есть несколько предостережений.если вы объедините веб-сокеты с вашим текущим приложением WSGI, вы получите блокировку для отдельного соединения, когда оно ожидает получения, поэтому добавьте тайм-аут.

Вот пример, работающий под Gevent Websockets.Это делает его ASYNC и обеспечивает двунаправленную связь.

import gevent
from gevent import monkey, signal, Timeout, sleep, spawn as gspawn
monkey.patch_all()
from gevent.pywsgi import WSGIServer
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket import WebSocketError
import bottle
from bottle import get, route, template, request, response, abort, static_file
import ujson as json

@route('/static/<filepath:path>')
def server_static(filepath):
    return static_file(filepath, root='static')

@route('/ws/remote')
def handle_websocket():
    message = 'TEST'
    wsock = request.environ.get('wsgi.websocket')
    if not wsock:
        abort(400, 'Expected WebSocket request.')
    while 1:
        wsock.send(message) # example of how to send data
        sleep(10) #pause this thread only for 10 seconds
        try:
            with Timeout(2, False) as timeout: #if you want to receive
                message = wsock.receive()
            if message:
                message = json.loads(message)
                if 'command' in message:
                    r.command(message['command'])
        except WebSocketError:
            break
        except Exception as exc:
            print(str(exc))


@get('/')
def remote():
    return template('templates/remote.tpl', title='WebsocketTest', websocket=WEBSOCKET, command='command', status=status)


if __name__ == '__main__':
    r=None
    status="Connecting..."
    gspawn(initialize)
    print 'Started...'
    HOST = socket.gethostbyname(socket.gethostname())
    HOST = 'localhost'
    WEBSOCKET =  'ws://{}/ws/remote'.format(HOST)
    botapp = bottle.app()
    server = WSGIServer(("0.0.0.0", 80), botapp, handler_class=WebSocketHandler)
    def shutdown():
        print('Shutting down ...')
        server.stop(timeout=60)
        exit(signal.SIGTERM)
    gevent.signal(signal.SIGTERM, shutdown)
    gevent.signal(signal.SIGINT, shutdown) #CTRL C
    server.serve_forever()

Тогда в вашем HTML вы действительно должны использовать переподключение библиотеки веб-сокетов https://github.com/joewalnes/reconnecting-websocket

<button id="TRIGGERED" type="button" class="btn btn-outline-primary">TRIGGER</button>
<script type="text/javascript" src="/static/reconnecting-websocket.min.js"></script>
<script>
var ws = new ReconnectingWebSocket('{{websocket}}');
ws.reconnectInterval = 3000;
ws.maxReconnectAttempts = 10;

ws.onmessage = function (evt) {
    var wsmsg = JSON.parse(evt.data);
    console.log(evt.data)
    };


$("button").click(function() {
    <!--console.log(this.id);-->
    ws.send(JSON.stringify({'{{command}}': this.id}));
});
</script>
...