树莓派(4-3)网页服务器 flask为背景的 websocket网页返回数据

1例程

https://www.cnblogs.com/luozx207/p/9719597.html

2flask教程

https://flaskbook.com/#

安装

pip install flask-socketio

例程

 都放在树莓派才行

tem里面放着网页

 

from flask import Flask, render_template
from flask_socketio import SocketIO,emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

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

@socketio.on('imessage', namespace='/test_conn')
def test_message(message):
    emit('message',  #//后端广播信息的事件名最好跟前端发送信息的事件名不一样
         {'data': message['data']},
         broadcast=True)



if __name__ == '__main__':
    socketio.run(app,'0.0.0.0',8080)

  关键就是要在emit中加broadcast=True这一项,如果不加,只有发送信息的客户端能收到消息

     socketio.run()函数封装了flask的web服务器的启动

网页

 打开两个网页都连接到http://127.0.0.1:5000/,测试一下,一个网页发送的信息在另一个网页也可以及时收到。一个简陋的多人聊天系统完成了:)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            namespace = '/test_conn';
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
       //连接后发送日志
            socket.on('connect', function(){
              console.log('connected')
            });
       //点击发送时将text框的内容发送到后端
            $('form#emit').submit(function(event) {
                socket.emit('imessage', {data: $('#emit_data').val()});
                return false;
            });
        //接收后端广播的信息
            socket.on('message', function(msg) {
                $('#log').append('<br>' + $('<div/>').text(msg.data).html());
            });
        });
    </script>
</head>
<body>
  <form id="emit" method="POST" action='#'>
      <input type="text" name="emit_data" id="emit_data" placeholder="Message">
      <input type="submit" value="发送">
  </form>
  <h2>Receive:</h2>
  <div id="log"></div>
</body>
</html>

  

 

猜你喜欢

转载自www.cnblogs.com/kekeoutlook/p/12332609.html