flask socketio:实例:1 ChatRoom

原理图:

参考代码:

chatserver.py

# 实现一个网页聊天器

from flask import Flask
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecret'
app.config['DEBUG'] = True
socketio = SocketIO(app, cors_allowed_origins="*")

# 监听message event
@socketio.on("message")
def handleMessage(msg):
    print("Message: " + msg)
    send(msg, broadcast=True) # broadcast=True:广播 服务器收到某个客户发来的data,并把该data转发给所有连接到该服务器的客户

if __name__ == "__main__":
    socketio.run(app)

chatpage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chat Room</title>
</head>
<body>
    <ul id="messages"></ul>
    <input type="text" id="myMessage">
    <button id="sendbtn">Send</button>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>

    <script>
        $(document).ready(function(){
            var socket = io.connect("http://127.0.0.1:5000");

            // connect event
            socket.on("connect", function(){
                socket.send("User has connected!");
            });

            socket.on("message", function(msg){
                $("#messages").append("<li>" + msg + "</li>");
            });

            $("#sendbtn").on("click", function(){
                socket.send($("#myMessage").val());
                $("#myMessage").val("");    
            });
        });
    
    </script>
</body>
</html>

运行展示:

发布了191 篇原创文章 · 获赞 1 · 访问量 4680

猜你喜欢

转载自blog.csdn.net/bluebloodye/article/details/103245434