简单搭建一个聊天室
初始想法是,当客户端连接成功时,服务端根据客户端的唯一标示,按照键值对保存用户id与对应该用户的socket
发送消息时,找到接受方的socket然后用该socket发送消息到接受方
但是没有找到保存登录socket的方法。。。。。
只能按照一种十分丑陋的方法完成。。。
客户端
由于没有找到在后台对指定客户端发送消息的方法。。。。
所以直接在前端监听自己名字的事件,后台在广播时,事件名称是接受人的参数
<template>
<div class="chatroom">
<div> name:<input v-model="name"/></div>
<div> to:<input v-model="to"/></div>
<div> msg:<input v-model="msg"/></div>
<button @click="send">send</button>
<div>
<h5>msg list</h5>
<div v-for="i in msg_list">
from:{{i['name']}}
msg:{{i['msg']}}
</div>
</div>
</div>
</template>
<script>
import io from 'socket.io-client';
let host = 'http://localhost:80'
var socket = io.connect(host);
export default {
name: "chat-room",
data() {
return {
name: '',
to: '',
msg: '',
msg_list: []
}
},
watch: {
name() {
socket.on(this.name, (data) => {
this.msg_list.push(data)
})
}
},
methods: {
send() {
socket.emit('send_msg', {
'name': this.name,
'to': this.to,
'msg': this.msg,
})
}
}
}
</script>
<style scoped>
.chatroom {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
后台广播的事件名,是消息发送者的id
from flask import Flask, send_file
from flask_cors import CORS
from flask_socketio import SocketIO, send, emit
from flask_compress import Compress
app = Flask(__name__)
Compress(app)
CORS(app)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
@socketio.on('send_msg')
def send_msg(data):
socketio.emit(data['to'], data)
if __name__ == '__main__':
socketio.run(app, port=80, host='0.0.0.0', debug='enable')
这种实现方式有问题
客户端在同一页面登录a后,又改为b,则该客户端可以收到 发送给a和b的消息,相当于在监听时多了一个事件
只需要在watch中,先关闭原有客户端,在重新连接即可
watch: {
name() {
socket.close()
socket = io.connect(host);
socket.on(this.name, (data) => {
this.msg_list.push(data)
})
}
},