DjangoChannels_vue前端搭建简易版的网页聊天功能

效果

链接：http://yongma16.xyz:/#/onlinewebsocket

redis安装

下载redis
linux https://redis.io/
windows https://github.com/microsoftarchive/redis
设置配置文件
修改redis.conf
注释掉

# bind 127.0.0.1
# proteced-mode no

启动linux上的redis-server
在对应的目录运行

 ./redis-server ../redis.conf

redis连接

使用redismanager连接搭建的redis
已经连接

channel模块的安装引用

pip安装channel模块

pip install -U channels

添加app

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    ...
    'channels',
)

asgi.py的配置文件添加websocket协议

import os
from channels.auth import AuthMiddlewareStack
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter,URLRouter#channels的路由
import webchat.routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myblogsite.settings')
application=ProtocolTypeRouter(
    {
        "http":get_asgi_application(),
        #添加http协议
        "websocket": AuthMiddlewareStack(
            URLRouter(
                webchat.routing.websocket_urlpatterns
                #聊天app
            )
        ),
        #路由配置
    }
)

路由：

# chat/routing.py
from django.urls import re_path

from . import consumers
#广播消息

websocket_urlpatterns = [
    re_path(r'ws/webchat/(?P<room_name>\w+)/$', consumers.ChatConsumer.as_asgi()),
]

异步发送消息：

import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
#异步请求
class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name
        # Join room group
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )
        self.accept()
    def disconnect(self, close_code):
        # Leave room group
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
        )
    # Receive message from WebSocket
    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        # Send message to room group
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )
    # Receive message from room group
    def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        self.send(text_data=json.dumps({
            'message': message
        }))

验证channels

中途不报错则安装过程没问题

$ python3 manage.py shell
>>> import channels.layers
>>> channel_layer = channels.layers.get_channel_layer()
>>> from asgiref.sync import async_to_sync
>>> async_to_sync(channel_layer.send)('test_channel', {'type': 'hello'})
>>> async_to_sync(channel_layer.receive)('test_channel')
{'type': 'hello'}

vue前端访问

连接接websocket

  data () {
    return {
      msg: '测试中',
      send_info: 'test Websocket!',
      room_name: ['DjangoVue'],
      room_select: '',
      baseUrl:'http:localhost:8006/webchat/index',
      // baseUrl:'http://yongma16.xyz:8006/webchat/index',
      websocketUrl:'localhost:8006/ws/webchat/',
      // websocketUrl: 'yongma16.xyz/ws/webchat/',
      websocket: null,
      // room 存房间名字，content保存聊天信息的数组
      chat_info: [],
      chat_room:null,
      room_loc:0,
      user:'匿名用户',
      cookieValue:document.cookie
    }
  },
  watch(){
    // cookieValue:function(newValue,oldValue){
    //   this.user=newValue
    //   console.log(newValue,oldValue)
    //   return newValue
    // }
  },
  beforeDestroy(){
    // window.removeEventListener("onload",this.initWebsocket());
  },
  mounted () {
    this.initWebsocket();
    this.getRoom(this.room_loc);
    this.initRoom();
    // window.addEventListener("onload",this.initWebsocket());
  },
  methods: {
    room_defaultClass:function(){
      console.log('css')
    },
    getRoom:function(room_loc){
      // 更新index
      this.room_loc=room_loc
      console.log('获取房间')
      axios.get(this.baseUrl).then(res=>{
        console.log('返回',res)
      }).catch(error=>{
        console.log('error',error)
      })
    },
    initRoom: function () {
      // 用户信息
// 日期格式化
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

      this.room_select = this.room_name[0]
    },
    changeRoom: function (roomName,roomLoc) {
      this.room_loc=roomLoc
      this.room_select=roomName
      // 新建连接
      // this.initWebsocket(roomName)
      console.log('选择房间',roomName)
      // console.log(that)
    },
    initWebsocket: function (roomName) {
      // 默认第一个房间
      let room=roomName!=undefined? roomName:this.room_name[0]
      // 判断房间是否存在，不存在则创建房间
      let chatRoomIndex=0
      try{
        //判断房间是否存在
        let roomFlag=false
        this.chat_info.map((o,index)=>{
          if(o.room==roomName){
            // 房间存在
            console.log('房间存在',roomName)
            roomFlag=true
            chatRoomIndex=index
          }
        })
        if(!roomFlag){
          // 房间不存在，创建
          
          let roomObject={"room":room,"content":[]}
          this.chat_info.push(roomObject)
          console.log("创建房间",this.chat_info)
        }
      }catch(e){
        console.log('创建房间出错',e)
      }
      let wsurl = this.websocketUrl
      
      this.websocket = new WebSocket('ws://' + wsurl + room + '/')// 连接
      console.log(this.websocket,'聊天室')
      this.websocket.onmessage = this.websocketMessage// 函数指向
      this.websocket.onopen = this.websocketOpen
      this.websocket.onerror = this.websocketError
      this.websocket.onclose = this.websocketClose
      // 保存数据 临时容器  房间号
      this.websocket.chat_info= JSON.parse(JSON.stringify(this.chat_info))
      this.websocket.chatRoomIndex= chatRoomIndex
      console.log('实例websocket',this.websocket)
    },
    websocketMessage: function (e) {

      console.log('聊天信息', JSON.parse(JSON.stringify(e.data)))
      let res = JSON.parse(e.data)
      if(res.message.isTrusted){
        console.log('accsee right!')
      }
      else{
          try{
                let dom=document.getElementById('idChat')
                console.log('滚动前',dom.scrollTop,dom.scrollHeight)
                dom.scrollTop=parseInt(dom.scrollHeight)+827
                console.log('滚动后',dom.scrollTop,dom.scrollHeight)
                dom.scrollTop=dom.scrollHeight
      // document.getElementById('idChat').scrollTop+=20
              }
          catch(e){
                console.log(e)
              }

        let message = {"user":this.user,"message":res.message,"create_time":new Date().Format("yyyy-MM-dd HH:mm:ss")}
        // 添加信息
        this.websocket.chat_info[this.websocket.chatRoomIndex].content.push(message)
        // 交换数据
        this.chat_info=this.websocket.chat_info
        console.log('信息',this.chat_info)
      }
    },
    websocketOpen: function (info) {
      this.websocketSend(info)
      this.send_info=''//清空
    },
    websocketSend: function (data) {
      let info = JSON.stringify({
        'message': data
      })
      this.websocket.send(info)
    },
    websocketError: function () {
      this.initWebsocket()// 重连
    },
    websocketClose: function (e) {
      console.log('离开', e)
    }
  },
  destroyed () {
    this.websocketClose()// 关闭
  }