socketio 和flask socketio 搭建 简单聊天室

简单搭建一个聊天室

初始想法是，当客户端连接成功时，服务端根据客户端的唯一标示，按照键值对保存用户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)
        })
      }
    },