flask flask-socketio創建一個網頁聊天應用

應用所需環境：

python 3.11.11
其他 只需要通過這個命令即可
pip install flask==3.1.0 Flask-SocketIO==5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
最好是用conda創建一個新的虛擬環境來驗證
完整的pip list如下
Package          Version
---------------- -------
bidict           0.23.1
blinker          1.9.0
click            8.1.7
Flask            3.1.0
Flask-SocketIO   5.4.1
h11              0.14.0
itsdangerous     2.2.0
Jinja2           3.1.4
MarkupSafe       3.0.2
pip              24.2
python-engineio  4.11.1
python-socketio  5.11.4
setuptools       75.1.0
simple-websocket 1.1.0
Werkzeug         3.1.3
wheel            0.44.0
wsproto          1.2.0

應用的結構目錄

在這里插入圖片描述

app.py中的內容：

from flask import Flask, render_template, request
from flask_socketio import SocketIO, send, emit, join_room, leave_room# import eventlet
# eventlet.monkey_patch()app = Flask("chatWare", static_folder="static", template_folder="templates")
app.config['SECRET_KEY'] = "bruh"
socketio = SocketIO(app)@app.route("/")
def main():return render_template("index.html")
# 監聽的可能是前端的socket.send這個方法 
@socketio.on('message')
def handleMessage(msg):print("收到: " + msg)# send(msg, broadcast=True)  # 這個發回去了，但是前端沒有定義方法進行接收 所以是不是可以不用發# 
@socketio.event  #加一個@socketio.event 表明他是個方法，被裝飾的方法可以被前端用socket.emit('sendMsg'）這種方式發送給后端。 message就是前端用emit的第二個參數
def sendMsg(message):print(message)# 下邊這個emit中的“SendtoAll”是 前端socket.on('SendtoAll'）的監聽對象   to=message['room'] 表示給房間里的所有人都發送消息  如果不寫則表示個自己一個人回消息# request.sid貌似是每對socket連接都會不一樣，但是沒斷開的應該是一樣的emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"])@socketio.event
def joinRoom(message):# global Room  # 沒有被用到吧，應該沒啥用# print(message)join_room(message['room'])  #加入房間有專門的函數，不用我們管emit("roomJoined", {"user" : request.sid,"room" : message['room']}, to=message['room'])@socketio.event
def leaveRoom(message):print(message)emit('roomLeftPersonal', {"room": message['room'], "user": request.sid})  # 這個沒寫to=message['room'] 表示給自己一個人回消息leave_room(message['room'])  # 可神奇，他咋知道那個人離開了，可能是socket連接所以知道emit('roomLeft', {"room":message['room'], "user":request.sid}, to=message['room'])if __name__ == "__main__":app.run(host="0.0.0.0", port=5000, debug=True, threaded=True)socketio.run(app)

index.html中的內容如下：

<!DOCTYPE html>
<html lang="en"><head><title>flask socketio通信</title>
<!--        flask-socketio--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script><!--        Jquery--><!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> --><script type="text/javascript" src="//cdn.bootcss.com/socket.io/3.1.2/socket.io.min.js"></script><script type="text/javascript" src="{{url_for('static', filename='js/index.js')}}"></script></head><body><h3>Join Room</h3><form id="joinRoom" method="POST" action="#"><label>Room Number</label><input type="text" id="roomNum" required><input type="submit" id="submitRoomNum"></form><button id="leave_room">Leave</button><h1>Hello World</h1><ul id="chatContent"><li>Text</li></ul><form id="SubmitForm" method="POST" action="#"><h3>發送文字</h3><textarea placeholder="輸入文字" name="msg" id="chatMsg" required></textarea><button type="submit">發送</button></form></body>
</html>

index.js中的內容如下：

$(document).ready(function(){// 1  一般的執行步驟 1，2，3....var socket = io();//  連接socketsocket.on('connect', function (){socket.send('Client Connected')});// 4$('form#SubmitForm').submit(function (event){// 發送給后端的sendMsg方法socket.emit('sendMsg', {msg:$('#chatMsg').val(),room:$('#roomNum').val()});$('#chatMsg').val("");return false});//  2 $('form#joinRoom').submit(function (event){socket.emit('joinRoom', {room:$('#roomNum').val()})return false});// 6$('#leave_room').on('click', function (){socket.emit('leaveRoom', {room:$('#roomNum').val()})console.log("sent")});// 3socket.on('roomJoined', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + 'has joined room'+ msg.room +' </li>')});// 8 socket.on('roomLeft', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + 'has left room'+ msg.room +' </li>')});// 7socket.on('roomLeftPersonal', function (msg, cb) {$('#chatContent').append('<li>' + 'you have left room'+ msg.room +' </li>')});// 5 監聽后端的SendtoAll方法socket.on('SendtoAll', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + ': ' + msg.msg + '</li>')});
})

在終端中輸入python app.py 并回車，然后打開兩個網頁分別輸入http://127.0.0.1:5000并回車即可進行聊天

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/63555.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/63555.shtml
英文地址，請注明出處：http://en.pswp.cn/web/63555.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！