Django实现websocket聊天室

什么是WebSocket

简介

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器双向通信，即允许服务器主动发送信息给客户端。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。

WebSocket的优势

现在，很多网站为了实现推送技术，所用的技术都是Ajax轮询。轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。

这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求。然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5定义的WebSocket协议优势如下：

• 小Header：互相沟通的Header非常小，只有2Bytes左右。
• 服务器不再被动接收到浏览器的请求之后才返回数据，而是在有新数据时就主动推送给浏览器。
• WebSocket协议能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

WebSocket可以帮助两端或多端接入的用户实时传递信息可以简单的实现一个聊天室，既可以是

一对一的聊天也可以是多对多的聊天。举个例子：我们在看直播的时候的实时弹幕就可以通过WebSocke实现，以及我们在微信上和某个人聊天的场景也可以通过WebSocke实现

我们要想通过django和实现聊天首先我们还需要借助一个工具来帮助我们实现，使用channels可以让你的Django应用拥有实时通讯和给用户主动推送信息的功能。

准备阶段

django配置

1、安装指定版本的包

pip install channels==2.1.3   


pip install channels_redis

2、注册channels

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'channels',
    'drf_yasg2',
]

3、在setting中配置asgi

这里为什么用asgi不用wsgi，因为wsgi不支持websocket通信。以及配置redis数据库

WSGI_APPLICATION = '项目名.wsgi.application'
ASGI_APPLICATION = '项目名.asgi.application'

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],
        },
    },
}

4、修改asgi.py文件

        需要注意的是，django版本小于3.0.0的话，需要自己创建一个asgi.py文件，django版本大于3.0.0就不用担心此问题，只需要修改asgi.py文件中的某些代码即可

"""
ASGI config for shixun project.

It exposes the ASGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
"""

import os
import django
from channels.http import AsgiHandler
from channels.routing import ProtocolTypeRouter, URLRouter
from . import routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', '项目名.settings')
django.setup()

application = ProtocolTypeRouter({
    "http": AsgiHandler(),
    "websocket": URLRouter(routing.websocket_urlpatterns),
})

5、在settings同级目录中创建routing.py。注册路由

from django.urls import path
from shixun.consumers import ChatConsumer

websocket_urlpatterns = [
    path('ws/chat', ChatConsumer.as_asgi()),
]

6、创建consumer.py文件,处理websocket通信逻辑

import json

from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer

CONN_LIST = []


class ChatConsumer(WebsocketConsumer):
    def websocket_connect(self, message):
        print("开始链接...")

        # 有客户端来向后端发送websocket连接的请求时，自动触发。
        # 服务端允许和客户端创建连接（握手）。
        self.accept()

        CONN_LIST.append(self)

    def websocket_receive(self, message):
        print('22222222', message)
        data = json.loads(message.get('text', '{}'))
        chat_type = data.get('chat_type')
        chat_id = data.get('chat_id')
        chat_content = data.get('message')
        # 判断聊天室的类型是否为加入聊天室，若为加入聊天室，就获取到聊天室的id和名字
        if chat_type == 'add_chat':
            async_to_sync(self.channel_layer.group_add)(chat_id, self.channel_name)
        else:
            async_to_sync(self.channel_layer.group_send)(chat_id, {"type": 'chat.message', 'message': message})

    def chat_message(self, event):
        # 发送消息的类型为text
        self.send(event['message']['text'])

    # def websocket_receive(self, message):
    #     # 浏览器基于websocket向后端发送数据，自动触发接收消息。
    #     print('接受的消息', message)
    #     text = message['text']  # {'type': 'websocket.receive', 'text': ''}
    #     print("接收到消息-->", text)
    #     res = {'result': 'ok'}
    #     for conn in CONN_LIST:
    #         conn.send(json.dumps(res))
    # 关闭连接
    def websocket_disconnect(self, message):
        CONN_LIST.remove(self)
        raise StopConsumer()

 前端

我们在使用vue的时候需要使用一个插件就可以轻松实现我们想要的效果，如图

 

使用chat_ui插件

1、安装

npm install @maybecode/m-chat

 2、vue中添加(main.js引用一下)

import Vue from 'vue'
import MChat from '@maybecode/m-chat'

Vue.use(MChat)

3、 局部安装(在我们使用的时候我们需要导入一下)

import MChat from '@maybecode/m-chat'

export default {
  components: {
    MChat
  }
}

 4、前端代码

下方表格是chat_ui的一些属性，我们可以根据需求来进行选择

参数	类型	默认值	说明
messages	Array	[]	消息数组
height	String	100vh	容器高度
loadMore	Function	-	加载更多函数
defaultAvatar	String	-	默认头像(支持本地头像require导入或者地址)
comment	Boolean	true	是否显示回复框
openPops	Array	['copy', 'cancel']	气泡框内显示的功能 例: ['copy', 'cancel']
customRecord	Boolean	flase	自定义录音功能(设置为true后自带录音失效，并且不触发submit事件)
openExtends	Array	["image", "file", "video"]	扩展面板显示的功能
openBases	Array	["text", "audio", "emoji"]	控制基础功能显示
imgMaxSize	Number	500	图片大小上传限制(kb)
videoMaxSize	Number	500	视频大小上传限制(kb)
fileMaxSize	Number	500	文件大小上传限制(kb)
leadPage	String	-

 若想要与小伙伴们一起测试的话可以在初始化初始化websocket是wsurl改为项目相对应的ip地址

前端改完这个地址，对应的后端也要改一下运行的方式：python manage.py runserver 0.0.0.0:8000 即可让其他的小伙伴也一起进行聊天

注：

`aioredis.errors.ReplyError: ERR unknown command 'BZPOPMIN'`

如果你的项目在运行过程中遇到此问题，是由于redis的版本过低，将redis的版本版本升级到5.0.0以及即可

Releases · tporadowski/redis · GitHubNative port of Redis for Windows. Redis is an in-memory database that persists on disk. The data model is key-value, but many different kind of values are supported: Strings, Lists, Sets, Sorted Sets, Hashes, Streams, HyperLogLogs. This repository contains unofficial port of Redis to Windows. - Releases · tporadowski/redishttps://github.com/tporadowski/redis/releases上边是redis官网的地址，如遇此问题请自行下载

切记：前端初始化websocket时的路由必须和后端启动方式相对应，否则也会报错，如果初始化的是ip地址，则后端启动时一定要在后边加上0.0.0.0:8000