先了解下这个 WebSocket ，在 WebSocket 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。 浏览器和服务器之间可以建立无限制的全双工通信，任何一方都可以主动发消息给对方。 如图：

为什么传统的HTTP协议不能做到WebSocket实现的功能？

这是因为HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。换句话说，浏览器不主动请求，服务器是没法主动发数据给浏览器的。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

一些websocket的应用：即时聊天通信、网站消息推送、在线协同编辑，如腾讯文档、多玩家在线游戏、视频弹幕等等...

我用django的channels做了个websocket私聊界面，来看看websocket在Django中的实现吧~

注：阅读下文需要一点Django基础呀

先上结果：

你可能需要安装：

django

channels

channels-redis

这些我都是用pip安装的最新版

redis数据库

Channels：

Channels引入了一个layer的概念，channel layer是一种通信系统，允许多个consumer实例之间互相通信，以及与外部Django程序实现互通。

Channel layer主要实现了两种概念抽象：

从代码出发吧：

项目名:message_example，app名:message

setting.py的修改

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
    'message'
#在根路由配置中指向 Channels。
ASGI_APPLICATION = 'message_example.routing.application'
# 配置channel layer
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],  #这个是redis的地址
在wsgi.py同级目录下创建routing.py
from django.urls import path
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
from message.consumers import MessagesConsumer
application = ProtocolTypeRouter({
    'websocket':AuthMiddlewareStack(  #认证
        URLRouter([
                path('ws/<str:username>/',MessagesConsumer)  #相当于urls.py的作用，给这个websocket请求相应的Consumer处理
在app文件夹里创建consumers.py(与models.py同级)
import json
from channels.generic.websocket import AsyncWebsocketConsumer
class MessagesConsumer(AsyncWebsocketConsumer):
    '''处理私信websocket请求'''
    async def connect(self):
        if self.scope['user'].is_anonymous:
            # 拒绝匿名用户连接
            await self.close()
        else:
            # 加入聊天组，以当前登录用户的用户名为组名，即self.scope['user'].username
            await self.channel_layer.group_add(self.scope['user'].username,self.channel_name)
            await self.accept()
    async def receive(self,text_data=None,bytes_data=None):
        '''接收到后端发来的私信'''
        print(text_data)
        await self.send(text_data=json.dumps(text_data))  #发送到接收用户
    async def disconnect(self,code):
        '''离开聊天组'''
        await self.channel_layer.group_discard(self.scope['user'].username,self.channel_name)
models.py的设计
from django.db import models
from django.contrib.auth.models import User
class Message(models.Model):
    sender = models.ForeignKey(User,related_name='sent_messages',on_delete=models.SET_NULL,blank=True,null=True,verbose_name='发送者')
    recipient = models.ForeignKey(User,related_name='receive_messages',on_delete=models.SET_NULL,blank=True,null=True,verbose_name='接收者')
    message = models.TextField(blank=True,null=True,verbose_name='内容')
    unread = models.BooleanField(default=True,db_index=True,verbose_name='是否未读')
    created_at = models.DateTimeField(auto_now_add=True,verbose_name='创建时间')
    def mark_as_read(self):
        if self.unread:
            self.unread = False
            self.save()
views.py对聊天室的处理
def chat(request,username):
    if request.method == 'GET':
        '''处理get请求，返回两用户的聊天记录'''
        recipient = User.objects.get(username=username)
        sender = request.user
        qs_one = Message.objects.filter(sender=sender,recipient=recipient)  # A发送给B的信息
        qs_two = Message.objects.filter(sender=recipient,recipient=sender)  # B发送给A的信息
        all = qs_one.union(qs_two).order_by('created_at')  # 取查到的信息内容的并集，相当于他两的聊天记录
        return render(request,'chat.html',locals())
    else:
        recipient = User.objects.get(username=username)  # 消息接收者
        content = request.POST.get('content','')  # 消息内容
        sender = request.user  # 发送者
        msg = Message.objects.create(sender=sender,recipient=recipient,message=content)  # 把消息存储到数据库
        qs_one = Message.objects.filter(sender=sender,recipient=recipient)  # A发送给B的信息
        qs_two = Message.objects.filter(sender=recipient,recipient=sender)  # B发送给A的信息
        all = qs_one.union(qs_two).order_by('created_at')  # 取查到的信息内容的并集，相当于他两的聊天记录
        channel_layer = get_channel_layer()
        # get_channel_layer()函数获得的是当前的websocket连接所对应的consumer类对象的channel_layer
        payload = {
            'type':'receive',  # 这个type是有限制的，比如现在用到的就是cusumer的receive函数
            'message':content,  # 消息内容
            'sender':request.user.username,  # 发送者
            'created_at':str(msg.created_at)  # 创建时间
        group_name = username  #这里用的是接收者的用户名为组名，每个用户在进入聊天框后就会自动进入以自己用户名为组名的group
        async_to_sync(channel_layer.group_send)(group_name, payload)
        #上一句是将channel_layer.group_send()从异步改为同步，正常的写法是channel_layer.group_send(group_name, payload)
        return render(request,'chat.html',locals())
 前端js主动建立websocket
$(function(){
    const ws_scheme = window.location.protocol === "https:" ? "wss":"ws";
    const ws_path = ws_scheme + "://" + window.location.host + "/ws/"+ currentUser +"/"
    const ws = new ReconnectingWebSocket(ws_path)
    //监听后端发送过来的消息
    ws.onmessage = function(event){
        const data = JSON.parse(event.data);
        var html = '<div style="border:solid 1px; margin:10px;"><p>'+data['sender']+' |' +data['message']+'</p><p>'+data['created_at']+'</p></div>'
        //$(".send_message").before(html);
        if (data['sender'] === activeUser){
            $(".send_message").before(html);
 最后，我还是将代码放github好了。右上角直达
测试的用法是，启动redis数据库，migrate迁移数据库。createsuperuser创建两个超级管理员，然后直接python manager.py runserver运行 然后去到主页登录，记得使用两个不同的浏览器登录用户实现聊天。
注：只是想学习websocket，所以前端页面和后端逻辑做的有点糟糕，有怪勿怪哈~
The End~