flask-1.1.4和vue2.0实现在线咨询客服

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实现在线咨询客服