import datetime
import json
##匯入socketio導包
from flask_socketio import Namespace, emit, SocketIO, disconnect
from flask import Flask, request, jsonify
from flask_cors import CORS
from utils.redison import r
import time

app = Flask(__name__)
CORS(app)
##配置跨域
socketio = SocketIO(app, cors_allowed_origins="
 
*")
dict1 = {}
kefulist = []

##封裝類
class MyCustomNamespace(Namespace):

    def __init__(self, namespace):
        super(MyCustomNamespace, self).__init__(namespace)
        self.sid = None
　　##首先要建立連線，方法名與前端對應
    def on_connct(self):
        self.sid = request.sid
        print('建立連線成功！-{}'.format(self.sid))
　　##客戶端斷開連線
    
 
def on_disconnect(self):

        print('客戶端斷開連線！')
　　##伺服器斷開連結
    def close_room(self, room):
        socketio.close_room(room=self.sid)
        print('{}-斷開連線'.format(self.sid))
　　##將使用者與客戶分開加入佇列（考慮高併發）
    def on_my_event(self, data):
        print(data)
        # tt = data.split(':')
        if
 
 int(data['type']) == 1:
            kefulist.append(data['sid'])
            print(11111)
            print(kefulist)
        else:
            r.add_list('userlist', data['sid'])
            print(2222)
##關閉連線

    def on_close(self,data):
        kefuid = r.get_str(data['sid'])

        r.del_str(data['sid'])
        print(data)

##發動訊息

    def on_send_mes(self, data):
        print(data)
        if int(data['type']) == 1:
            print(11111)
            emit('server_response', data['mes'], room=data['sid'])
        else:
            kefuid = r.get_str(data['sid'])
            emit('server_response', data['mes'], room=kefuid)

##呼叫介面，獲取系統已分配待服務的客戶

@app.route('/get_kehu', methods=['GET'])
def get_kehu():
    if request.method == 'GET':
        sid = request.args.get('sid')
        res = r.lranges(sid)
        userlist = r.lranges('userlist')
        kefulen = int(len(kefulist))
        if userlist != None:
            num = 0
　　　　　　　　##這個迴圈是為了實現平均分配，根據客服列表的下標一一分配
            for i in userlist:if num < kefulen:
                    usersid = r.del_rpop('userlist')
                    print(usersid)
                    print(kefulist[num])
                    r.add_list(kefulist[num], usersid)
                    r.set_str(usersid,kefulist[num])


                else:
                    num = 0
                    usersid = r.del_rpop('userlist')
                    r.add_list(kefulist[num], usersid)
                    r.set_str(usersid, kefulist[num])
                num += 1
        else:
            pass
        return jsonify({"code": 200, "list": res})


socketio.on_namespace(MyCustomNamespace('/test'))
if __name__ == '__main__':
    # test()
    socketio.run(app, debug=True, host='0.0.0.0', port=4000)
    # test()

<template>
  <div>
    <h1>websocket連線</h1>
    <div v-for="i in list">
      {{ i }}
    </div>
    <input type="" v-model="mes" value="">
    <button @click="Connect">建立連線</button>
    <div v-for="(i,j) in kehu">
      <li>{{ i }}
        <button @click="sendMessage(i)">點選溝通</button>
      </li>


    </div>
    <button @click="dianji">獲取</button>
    <button @click='sendMessage'>傳送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      mes: '',
      list: [],
      kehu: {}
    }
  },
//進入直接建立連線
  sockets: {
    // 通訊的name
    //這裡是監聽connect事件
    // connect: function () {
    //   this.id = this.$socket.id
    //   alert('建立連線')
　　//my_event與後端方法名對應
    //   this.$socket.emit('my_event', this.id + ':kf1')
    // },

    disconnect: function () {
      alert('斷開連線')
    },

    reconnect: function () {
      console.log('重新連線')
      this.$socket.emit('conect')

    },
    server_response: function (data) {
      this.list.push(data)
      console.log('接收資料', data)
    },

  },
  methods: {
    sendMessage(sid) {
　　　　　//send_mes與後端方法名對應
      // console.log(this.mes)
      this.$socket.emit('send_mes', {'kefuid': 'kf2', 'mes': this.mes, 'type': 1, 'sid': sid})
    },
    Connect() {
      this.id = this.$socket.id
      alert('建立連線')
      this.$socket.emit('my_event', {'name':'kf2','sid': this.id, 'type': 1})
    },
    dianji() {
      this.$axios.get('get_kehu?sid='+this.id).then(res => {
        this.kehu = res.data.list
      })
    }
  },
  goutong(sid) {

  },
  mounted() {
    // this.$socket.emit('connect'); //在這裡觸發connect事件

  }

}
</script>

<style>
</style>

App.vue

<template>
  <div>
    <h1>客戶端</h1>
    <div v-for="i in list">
      {{ i }}
    </div>
    <input type="" v-model="mes" value="">
    <button @click="Connect">建立連線</button>
    <button @click='sendMessage'>傳送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      mes: '',
      list: [],
      kehu: []
    }
  },
  sockets: {
    // 通訊的name
    //這裡是監聽connect事件
    // connect: function () {
    //   this.id = this.$socket.id
    //   alert('建立連線')
    //   this.$socket.emit('my_event', this.id + ':123456')
    // },

    disconnect: function () {
      alert('斷開連線')
      this.$socket.emit('close', {'name': '12345', 'sid': this.id, 'type': 2})

    },

    reconnect: function () {
      console.log('重新連線')
      this.$socket.emit('conect')

    },
    server_response: function (data) {
      this.list.push(data)
      console.log('接收資料', data)
    },

  },
  methods: {
    sendMessage() {
      this.$socket.emit('send_mes', {'userid': 12345, 'mes': this.mes, 'sid': this.id, 'type': 2})
    },
    Connect() {
      this.id = this.$socket.id
      alert('建立連線')
      this.$socket.emit('my_event', {'name': '12345', 'sid': this.id, 'type': 2})
    },
  },
  mounted() {
    // this.$socket.emit('connect'); //在這裡觸發connect事件

  }

}
</script>

<style>
</style>

App.vue

　　flask-1.1.4和vue2.0實現線上諮詢客服