websocker 聊天

1 前端 vue

 mounted:function(){
     if("WebSocket" in window){
     
       console.log("支持");
       //生成websocket链接
         

       var ws = new WebSocket("ws://192.168.1.58:8000/user/websocketlink/?jwt="+this.uid);
       //发送链接请求
       ws.onopen = function(){
          ws.send("test0000");
       }
       //发送消息
       ws.onmessage = function(evt){
          //将获取信息打印 

          var received_msg = evt.data;
          alert(received_msg);
          // this.$message.info(received_msg)
       }
       //捕获断开链接
       ws.onclose = function(){
          console.log("链接已经关闭");
       }
    }
    }

测试 后端

#websocket接口
#客户端列表
clients = {}
@accept_websocket
def websocketlink(request):

	if request.is_websocket():

		userid = str(uuid.uuid1())

		while True:

			message = request.websocket.wait()

			if not message:
				break
			else:
				print('websocket链接成功'+str(message))
				clients[userid] = request.websocket

#推送消息
def sendmessage(request):

	#获取消息
	msg = request.GET.get("msg")

	for client in clients:
		clients[client].send(msg.encode('utf-8'))

	return HttpResponse({'message':"ok"})

　　

　　

后端 连接

from dwebsocket.decorators import accept_websocket
import uuid

clients={}
@accept_websocket
def websocketlink(request):
    if request.is_websocket():
        # user_id=str(uuid.uuid1())
        jwt=request.GET.get('jwt')
        uid=jwt_end(jwt)
        while True:
            message=request.websocket.wait()
            if not message:
                break
            else :
                print('websocket连接ok'+str(message))
                clients[uid]=request.websocket
                print(clients)

　　推送消息

def sendmessage(request):

    msg =request.GET.get("msg")
    jwt = request.GET.get("jwt")
    send_uid=jwt_end(jwt)
    user=User.objects.filter(id=send_uid).first() # 获取发送人名称
    uid=int(request.GET.get('uid'))
    # 建立连接可能是双向的
    char=Chat.objects.filter(user_id_a=send_uid,user_id_b=uid).first()
    char1=Chat.objects.filter(user_id_a=uid,user_id_b=send_uid).first()


    if char:
        print('zoule1')
        Message.objects.create(message=user.username+': '+msg, char_id= char.id)
    elif char1:
        print('zoule2')
        Message.objects.create(message=user.username+': '+msg, char_id= char1.id)
    elif not (char and char1):
        print('走了3')
        chat=Chat(user_id_a=send_uid,user_id_b=uid)
        chat.save()
        Message.objects.create(message=user.username+': '+msg, char_id=chat.id)

    # for client in clients:
    try:
        clients[uid].send(msg.encode('utf-8'))
    except Exception as e:
        # message_table.insert({'uid': uid,'send_uid':send_uid,'message':msg})
        print('发送失败')
        print(e)
        return HttpResponse(json.dumps({'msg':'发送失败'},ensure_ascii=False))

    # message_table.insert({'uid': uid, 'send_uid': send_uid, 'message': msg})
    return HttpResponse(json.dumps({'message':"ok"},ensure_ascii=False))

　　

消息表关联

class Chat(models.Model):
    id=models.AutoField(primary_key=True)
    user_id_a=models.IntegerField()
    user_id_b=models.IntegerField()
    class Meta:
        db_table='chat'


class Message(models.Model):
    id = models.AutoField(primary_key=True)
    message = models.CharField(max_length=255)
    char_id=models.IntegerField()
    class Meta:
        db_table = "message"

　　展示 接口

class Get_message(APIView):
    def get(self,request):
        jwt=request.GET.get('jwt')
        send_uid=jwt_end(jwt)
        uid=int(request.GET.get('uid'))
        list_msg=[]
        char=Chat.objects.filter(user_id_a=send_uid,user_id_b=int(uid)).first()
        char1=Chat.objects.filter(user_id_a=int(uid),user_id_b=send_uid).first()
        if not (char or char1):
            return Response({'msg':'没有建立连接'})
        if char1:
            message=Message.objects.filter(char_id=char1.id)
            ser=MessageSerializers(message,many=True)
            return Response(ser.data)
        if char:
            message = Message.objects.filter(char_id=char.id)
            ser = MessageSerializers(message, many=True)
            return Response(ser.data)