py
复制代码
from flask import Flask, render_template, request
from flask_socketio import SocketIO, Namespace, join_room, leave_room
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
def create_application(name, config=None, timeout=60, proxy=None):
app = Flask(name)
@app.route("/", methods=["GET", "POST"])
def main():
return render_template("index.html")
return app
class MyNamespace(Namespace):
def on_connect(self):
print("Client connected")
# def on_message(self, message):
# print(f"Received message: {message}")
# # socket_io.emit('response', {'data': 'Message received'}, namespace="/my_room") # 下边这种方式和本行这个方式都可以（在没有to传递参数时，self方式不能传递to这个参数）
# self.emit('response', {'data': 'Message received'}, namespace="/my_room")
def on_joinRoom(self, message):
# global Room # 没有被用到吧，应该没啥用
# print(message)
join_room(message['room']) #加入房间有专门的函数，不用我们管
# socket_io.emit("room_joined", {
socket_io.emit("roomJoined", {
"user" : request.sid,
"room" : message['room']
},to=message['room'], namespace="/my_room") # ！！！这个namespace="/my_room"一定要写
def on_sendMsg(self,message):
print(message)
# 下边这个emit中的"SendtoAll"是 前端socket.on('SendtoAll'）的监听对象 to=message['room'] 表示给房间里的所有人都发送消息 如果不写则表示个自己一个人回消息
# request.sid貌似是每对socket连接都会不一样，但是没断开的应该是一样的
# self.emit 这个不能传递, to=message["room"] 不然会报错
# self.emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"], namespace="/my_room")
socket_io.emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"], namespace="/my_room")
def on_leaveRoom(self,message):
print(message)
socket_io.emit('roomLeftPersonal', {"room": message['room'], "user": request.sid}, namespace="/my_room") # 这个没写to=message['room'] 表示给自己一个人回消息
leave_room(message['room']) # 可神奇，他咋知道那个人离开了，可能是socket连接所以知道
socket_io.emit('roomLeft', {"room":message['room'], "user":request.sid}, to=message['room'], namespace="/my_room")
app = create_application("pipeagent_service", config=None)
socket_io = SocketIO(app, processes=True, cors_allowed_origins="*", async_mode='gevent')
socket_io.on_namespace(MyNamespace('/my_room'))
if __name__ == "__main__":
socket_io.run(app=app, host="0.0.0.0", debug=False, log_output=True)
js
复制代码
$(document).ready(function(){
// 这个 my_room对应后端中的Namespace 即命名空间
var socket = io.connect('http://localhost:5000/my_room');
socket.on('connect', function() {
socket.send('Client Connected')
// console.log("Connected to server");
});
$('form#joinRoom').submit(function (event){
socket.emit('joinRoom', {room:$('#roomNum').val()})
return false
});
// 3
socket.on('roomJoined', function (msg, cb) {
$('#chatContent').append('<li>' + msg.user + 'has joined room'+ msg.room +' </li>')
});
// 4
$('form#SubmitForm').submit(function (event){
// 发送给后端的sendMsg方法
socket.emit('sendMsg', {
msg:$('#chatMsg').val(),
room:$('#roomNum').val()
});
$('#chatMsg').val("");
return false
});
// 5 监听后端的SendtoAll方法
socket.on('SendtoAll', function (msg, cb) {
$('#chatContent').append('<li>' + msg.user + ': ' + msg.msg + '</li>')
});
// 6
$('#leave_room').on('click', function (){
socket.emit('leaveRoom', {room:$('#roomNum').val()})
console.log("sent")
});
// 7
socket.on('roomLeftPersonal', function (msg, cb) {
$('#chatContent').append('<li>' + 'you have left room'+ msg.room +' </li>')
});
// 8
socket.on('roomLeft', function (msg, cb) {
$('#chatContent').append('<li>' + msg.user + 'has left room'+ msg.room +' </li>')
});
// socket.on('response', function(data) {
// console.log(data.data);
// });
// socket.on('disconnect', function() {
// console.log('Disconnected');
// });
// socket.emit('message', 'Hello, server!');
// 1 一般的执行步骤 1，2，3....
// var socket = io();
// 连接socket
// socket.on('connect', function (){
// socket.send('Client Connected')
// });
})
