websocket应用

一、vue2 + flask socketio 实现客服一对多对话

import datetime
import json
from flask_socketio import Namespace, emit, SocketIO, disconnect
from flask import Flask,request

app = Flask(__name__)
socketio = SocketIO(app,cors_allowed_origins="*")
list={}

class MyCustomNamespace(Namespace):

    def __init__(self,namespace):
        super(MyCustomNamespace, self).__init__(namespace)
        self.sid = None
    def on_connect(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):
        # while True:
            print(data)
            data = data.replace('/test#','')
            tt = data.split(':')
            list[tt[1]]=tt[0]
            
           #{'134234':'234','1':'2sdddd'}
            #list.rpush(1,'134')
            #data={'userid':1}
            #emit('server_response', res_json,room=list[0])
           
            # dic = {'name': 'zs'}
            # res_json = json.dumps(dic)
            # emit('server_response', res_json,room=list[0])
    
    def on_send_mes(self,data):
         print(data)
         print("***")
         print(list)
         dic = {'name': 'zs'}
         res_json = json.dumps(dic)
         emit('server_response', res_json,room=list['zs'])


socketio.on_namespace(MyCustomNamespace('/test'))

if __name__ == '__main__':
    socketio.run(app)

<template>
  <div>
    <h1>websocket连接</h1>
    <input type="" v-model="mes" value="">
    <button @click='sendMessage'>asdf</button>
  </div>
</template>

<script>
export default{
  data(){
      return{
          id:'',
          mes:''
      }
  },
  sockets:{
    // 通信的name
    //这里是监听connect事件
    connect: function(){
      this.id=this.$socket.id
      // alert('建立连接')
      this.$socket.emit('my_event',this.id+':12342423')
    },

    disconnect: function(){
      alert('断开连接')
    },

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

    },
    server_response: function(data){
      console.log('接收数据',data)
    },
    
  },
  methods: {
    sendMessage() {
        this.$socket.emit('send_mes', {'mes':this.mes})
  },
  },
  mounted(){
      // this.$socket.emit('connect'); //在这里触发connect事件
      
  }
  
}
</script>

<style>
</style>

App.vue

二、 vue2 + django webosocket 实施更新

vue中代码

轮询 setInterval(调用函数 ， 时间)

 const initWebsocket=()=>{        
     let socket = new WebSocket('ws://127.0.0.1:8000/meiduo01/websocket_conn/')       
     //建立        
     socket.onopen=function(){            
         console.log('建立连接')        
     }        
     //接收消息        
     socket.onmessage=function(msg){            
         customerlist.data=JSON.parse(msg.data)            
         console.log(customerlist)        
     }        
     //关闭        
     socket.close=function(e){            
         console.log(e)            
         console.log('close')        
     }}

django中的代码

from dwebsocket.decorators import accept_websocket
websocketlist=[]

@accept_websocket
def websocket_conn(request):
    #是否有ws的请求
    if request.is_websocket:
        websocketlist.append(request.websocket)
        
    for message in request.websocket:
            break 
            
#发送消息
def sendmes():
    import time
    
    sql = "select name from customer"
    res = db.find_all(sql)
    if websocketlist:
        #给这个请求发送数据
        for i in websocketlist:
            lst = []
            for j in res:
                lst.append({'name':j['name']})
            
            b1 = json.dumps(lst,ensure_ascii=False).encode('utf-8')
            i.send(b1)
    return HttpResponse('ok')