原理图:
参考代码:
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>
运行展示: