Django用websocket實作聊天室之筑基篇-有解無憂

最近閑來無事，無意發現一個聊天室的前端UI，看著挺好看的但是沒有聊天室的通信代碼，于是想給它安裝電池(通信部分)，先看UI：

開始通信部分的作業：

使用的組件：

　　Django1.11.13

　　channels 2.3.1

　　redis

　　jQuery

Django實作聊天室一般有實作輪訓（比較老，效率低）、websocket等；這里用websocket，實作websocket有多種途徑，一般有：channels和dwebsocket等，dwebsocket使用簡單但是看了下官網好像只提供了差不多Django1.8版本以前的用法（添加MIDDLEWARE_CLASSES = ['dwebsocket.middleware.WebSocketMiddleware']），而Django1.11.13廢棄了MIDDLEWARE_CLASSES，使用MIDDLEWARE，具體遷移方法未做深究，這里就直接使用channels

channels官方檔案：https://channels.readthedocs.io/en/latest/

準備階段

1.安裝channels
sudo pip install -U channels

檢測下 channels是否安裝成功

$ python3 -c 'import channels; print(channels.__version__)'
2.3.1

2.如果沒安裝redis，先安裝redis

（1）Ubuntu安裝redis 使用命令sudo apt-get install redis-server
　　whereis redis 查看redis的安裝位置
　　ps -aux | grep redis 查看redis服務的行程運行
　　netstat -nlt | grep 6379根據redis運行的埠號查看redis服務器狀態，埠號前是redis服務監聽的IP(默認只有本機IP 127.0.0.1)

（2）問題解決，我的遠程騰訊云Ubuntu服務器安裝完redis無法啟動,提示：

分析是主機上禁用了IPv6，而Ubuntu的redis-server軟體包（版本5：4.0.9-1）附帶了：系結127.0.0.1 :: 1
解決辦法：
修改redis組態檔中的 bind 地址；注釋 bind 地址或將 bind 地址修改為 0.0.0.0
vim /etc/redis/redis.conf
// 注釋bind地址
#bind 127.0.0.1 ::1
//或修改bind地址-并允許其開放訪問
bind 0.0.0.0

啟動redis 服務
service redis-server start

檢查服務及埠
systemctl status redis-server
//提示資訊
#redis-server.service - Advanced key-value store
#Active: active (running) since Fri 2019-01-25 15:24:47 CST; 41min ago

netstat -ntpl | grep 6379
//提示資訊
#tcp 0 0 0.0.0.0:6379 0.0.0.0:* LISTEN 28507/redis-server

3.安裝channels_redis
sudo pip install channels_redis

4.確保channels可以與Redis通信，打開Django shell并運行以下命令：

$ 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'}

接下來創建一個Django專案和一個app，我創建的專案名chatroom，app名chatPage

目錄結構：

chatroom
├── chatPage
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── models.py
│   ├── urls.py
│   ├── views.py
├── chatroom
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
└── manage.py

然后直接按channels官網流程走一遍，先把通信調通：

setting.py中注冊chatPage，順便把channels 也注冊了

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

專案根目錄添加chatPage 應用的路由

from django.contrib import admin
from django.conf.urls import url ,include 

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^chatPage/' ,include("chatPage.urls",namespace="chatPage")),
    
]

在chatPage目錄下新建目錄templates，并在templates目錄中創建一個名為chat.html的檔案，作為登陸首頁，將以下代碼加入chat.html

<!-- chat/templates/chat/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Rooms</title>
</head>
<body>
    What chat room would you like to enter?<br/>
    <input id="room-name-input" type="text" size="100"/><br/>
    <input id="room-name-submit" type="button" value="Enter"/>

    <script>
        document.querySelector('#room-name-input').focus();
        document.querySelector('#room-name-input').onkeyup = function(e) {
            if (e.keyCode === 13) {  // enter, return
                document.querySelector('#room-name-submit').click();
            }
        };

        document.querySelector('#room-name-submit').onclick = function(e) {
            var roomName = document.querySelector('#room-name-input').value;
            window.location.pathname = '/chat/' + roomName + '/';
        };
    </script>
</body>
</html>

chatPage目錄下view.py寫視圖函式

def index(request):
    #return HttpResponse("helloworld")
    response= render_to_response('chat.html') 
    return render(request, 'chat.html', {})
    return response

chatPage目錄下urls.py添加視圖路由

from django.conf.urls import url

from . import views

app_name='chatPage'

urlpatterns = [
    url(r'^chat$', views.index, name= 'chat'),

]

現在運行 python manage.py runserver

瀏覽器輸入http://localhost:8000/chatPage/chat，即可顯示賬號名輸入頁面，但是輸入還不能跳轉，接下來添加聊天室頁面，添加之前先引入channels 和 Redis到Django專案：

setting.py中添加下面的代碼：

ASGI_APPLICATION = 'chatroom.routing.application'   #websocket擴展

#在本地6379埠啟動redis :redis-server


#配置channels_redis的四種方法，任選擇一種，建議選最后一種需要加密密碼的，然后需要給Redis加密
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("localhost", 6379)],
        },
    },
}
 

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

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

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": ["redis://:[email protected]:6379/0"],
            "symmetric_encryption_keys": [SECRET_KEY],
        },
    },
}

redis設定密碼的兩種方式

1-修改組態檔(需重啟)
2-命令修改密碼(無需重啟)
方式1:
1-打開 /etc/redis/redis.config 檔案
2-找到 :# requirepass foobared # 去掉行前的注釋，并修改密碼為所需要的密碼，保存檔案
3-重啟redis sudo service redis restart
4-連接redis: redis-cli -h 127.0.0.1 -p 6379 -a 密碼
方式2:
1-連接redis
2-config get requirepass # 獲取當前密碼
3-config set requirepass 123456 # 設定當前密碼為123456
4-config get requirepass # 獲取當前密碼
"""

在chatPage目錄下的templates目錄中創建一個名為chatroom.html的檔案，作為登陸首頁，將以下代碼加入chatroom.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
    <textarea id="chat-log" cols="100" rows="20"></textarea><br/>
    <input id="chat-message-input" type="text" size="100"/><br/>
    <input id="chat-message-submit" type="button" value="Send"/>
</body>
<script>
    var roomName = {{ room_name_json }};

    //console.log(window.location.host);
    // 打開一個WebSocket:
    var chatSocket = new WebSocket(
        "ws://" + window.location.host +
        "/ws/chatPage/" + roomName +"/");
    
    // 回應onmessage事件:
    chatSocket.onmessage = function(e) {
        var data = JSON.parse(e.data);
        console.log(data);
        var message = data['message'];
        document.querySelector('#chat-log').value += (message + '\n');
    };

    chatSocket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.querySelector('#chat-message-input').focus();
    document.querySelector('#chat-message-input').onkeyup = function(e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };

    document.querySelector('#chat-message-submit').onclick = function(e) {
        var messageInputDom = document.querySelector('#chat-message-input');
        var message = messageInputDom.value;
        // 給服務器發送訊息
        chatSocket.send(JSON.stringify({
            'message': message
        }));

        messageInputDom.value = '';
    };
</script>
</html>

寫視圖函式

def chatroom(request, room_name):
    print(room_name)
    return render(request, 'chatroom.html', {
        'room_name_json': mark_safe(json.dumps(room_name))
    })

添加路由

from django.conf.urls import url

from . import views

app_name='chatPage'

urlpatterns = [
    url(r'^chat$', views.index, name= 'chat'),

    url(r'^chatroomPage/(.*)/', views.chatroom),

]

ASGI_APPLICATION = 'chatroom.routing.application' 中的chatroom為工程名
然后需要建立屬于websocket的路由檔案，在和工程同名的目錄chatroom下新建routing.py檔案，并寫入下面的代碼:

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chatroom.routing

#ProtocolTypeRouter將首先檢查連接的型別，如果是websocket，連接會交給AuthMiddlewareStack,AuthMiddlewareStack會對當前身份驗證的用戶填充連接的scope,然后連接將被給到URLRouter.根據提供的url模式，URLRouter將檢查連接的http路徑，將其路由到指定的特定的consumer.
application = ProtocolTypeRouter({      
    # (http->django views is added by default)
    'websocket': AuthMiddlewareStack(
        URLRouter(
            chatroom.routing.websocket_urlpatterns
        )
    ),
})

ProtocolTypeRouter將首先檢查連接的型別，如果是websocket，連接會交給AuthMiddlewareStack,
AuthMiddlewareStack會對當前身份驗證的用戶填充連接的scope,然后連接將被給到URLRouter.根據提供的url模式，URLRouter將檢查連接的http路徑，將其路由到指定的特定的consumer.URLRouter中的chatPage為自己建的APP名
然后在應用chatPage目錄下新建routing.py檔案，寫入下面的代碼，添加websocket訪問的路由

from django.conf.urls import url

from . import consumers

websocket_urlpatterns = [
    url(r'^ws/chatPage/(?P<room_name>[^/]+)/$', consumers.ChatConsumer),
]

然后同級目錄下新建名為consumers.py的檔案，官網是先介紹同步的websocket的寫法，這里直接一步到位，實作異步的websocket方式，寫入下面的代碼：

#-*-coding:utf-8-*-
from channels.generic.websocket import AsyncWebsocketConsumer
import json

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):        #連接時呼叫
        print(self.scope)
        self.room_name = self.scope['url_route']['kwargs']['room_name']     #從路由獲取"room_name" 引數
                                                                           #每個 consumer 都有一個 scope, 其中包含有關其連接的資訊, 特別是來自 URL 路由和當前經過身份驗證的用戶 (如果有的話) 中的任何位置或關鍵字引數，

        self.room_group_name = 'chat_Group'  #'chat_%s' % self.room_name    #給一個固定組名

        # Join room group
        await self.channel_layer.group_add(     #發送內容給組的通道層，加入房間
            self.room_group_name,               
            self.channel_name                   
        )

        await self.accept()     #等待連接，如果你在 connect() 方法中不呼叫 accept(), 則連接將被拒絕并關閉

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard( #離開房間洗掉通道層資料
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,   #發送訊息到room_group_name通道層
            {
                'type': 'chat_message',     #訊息型別，對應處理方法
                'message': message
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        await self.send(text_data=https://www.cnblogs.com/pozhu15/p/json.dumps({
            'message': message,
            #'username':self.room_name
        }))
        
        
        #1.通道層具有純異步介面（用于發送和接收）；如果要從同步代碼中呼叫它們，則需要將它們包裝在轉換器中，
        #2.可以從專案中獲取默認通道層 channels.layers.get_channel_layer()，但是如果您使用的是consumers ，則會自動在使用者上為您提供一個副本self.channel_layer
        #3.默認情況下send()，group_send()，group_add()等功能異步功能，這意味著你要await他們，如果需要從同步代碼中呼叫它們，則需要使用方便的 asgiref.sync.async_to_sync包裝器：
#from asgiref.sync import async_to_sync
#async_to_sync(channel_layer.send)("channel_name", {...})

函式說明：
self.scope[‘url_route’][‘kwargs’][‘room_name’]
從給 consumer 打開 WebSocket 連接的 chat/routes.py 中的 URL 路由中獲取 "room_name" 引數，
每個 consumer 都有一個 scope, 其中包含有關其連接的資訊, 特別是來自 URL 路由和當前經過身份驗證的用戶 (如果有的話) 中的任何位置或關鍵字引數，

self.room_group_name = ‘chat_%s’ % self.room_name
直接從用戶指定的房間名稱構造一個 Channels group 名稱, 無需任何參考或轉義，
組名可能只包含字母、數字、連字符和句點，因此, 此示例代碼將在具有其他字符的房間名稱上發生失敗，

async_to_sync(self.channel_layer.group_add)(…)
加入一個 group，
async_to_sync(…) wrapper 是必需的, 因為 ChatConsumer 是同步 WebsocketConsumer, 但它呼叫的是異步 channel layer 方法，（所有 channel layer 方法都是異步的）
group 名稱僅限于 ASCII 字母、連字符和句點，由于此代碼直接從房間名稱構造 group 名稱, 因此如果房間名稱中包含的其他無效的字符, 代碼運行則會失敗，

self.accept()
接收 WebSocket 連接，
如果你在 connect() 方法中不呼叫 accept(), 則連接將被拒絕并關閉，例如，您可能希望拒絕連接, 因為請求的用戶未被授權執行請求的操作，
如果你選擇接收連接, 建議 accept() 作為在 connect() 方法中的最后一個操作，

async_to_sync(self.channel_layer.group_discard)(…)
離開一個 group，
將 event 發送到一個 group，
event 具有一個特殊的鍵 'type' 對應接收 event 的 consumers 呼叫的方法的名稱，

至此一個基本的聊天室通信部分就基本完成了，運行python manage.py runserver

瀏覽器打開http://localhost:8000/chatPage/chat 鍵入名稱，回車，即可到聊天界面，此時發送的訊息只能自己看到，還不能達到多人聊天，原因是不在同一個group中，現在
在consumers.py修改這句，self.room_group_name = 'chat_Group' #'chat_%s' % self.room_name，這里我們設定了一個固定的房間名作為Group name，所有的訊息都會發送到這個Group里邊，當然你也可以通過引數的方式將房間名傳進來作為Group name，從而建立多個Group，這樣可以實作僅同房間內的訊息互通

當我們啟用了channel layer之后，所有與consumer之間的通信將會變成異步的，所以必須使用async_to_sync

一個鏈接（channel）創建時，通過group_add將channel添加到Group中，鏈接關閉通過group_discard將channel從Group中剔除，收到訊息時可以呼叫group_send方法將訊息發送到Group，這個Group內所有的channel都可以收的到

group_send中的type指定了訊息處理的函式，這里會將訊息轉給chat_message函式去處理

現在再次在多個瀏覽器上打開聊天頁面輸入訊息，發現彼此已經能夠看到了

將Django + `channel部署到daphne +supervisor 或部署到遠程apache2服務器`

到此已經完成了聊天室的基本通信功能，但是一直在本地除錯，接下來需要將Django + channel正式部署到遠程服務器，形成上線雛形，這里使用以下兩種部署方式 daphne+supervisor和 Apache2代理

（1）daphne+supervisor 的部署

在專案目錄中，已經有一個名為的檔案wsgi.py，它是Django作為WSGI應用程式呈現，在它旁邊創建一個新檔案asgi.py，將下面的代碼加入其中

"""
ASGI entrypoint. Configures Django and then runs the application
defined in the ASGI_APPLICATION setting.
"""

import os
import django
from channels.routing import get_default_application

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "chatroom.settings")
django.setup()
application = get_default_application()

啟動daphne 測驗是否正常運行(成功以后退出)：

daphne -p 8090 chatroom.asgi:application

或規定IP和埠
daphne -b 0.0.0.0 -p 8090 chatroom.asgi:application

安裝supervisor

　　supervisor是由python實作的一個行程管理工具，可以確保所管理的行程一直運行，當行程一點中斷supervisord會自動進行重啟，

安裝步驟：

sudo pip install supervisor        安裝

sudo echo_supervisord_conf > /etc/supervisord.conf        生成組態檔

使用supervisor管理daphne行程

編輯/etc/supervisord.conf加入配置

[program:daphne]
socket=tcp://localhost:8005            # daphne 運行的埠
directory=/root/mysite                # 專案的目錄，改為自己的專案目錄
command=daphne -b 0.0.0.0 -p 8005 chatroom.asgi:application            # 執行的命令，改為自己的專案名稱
numprocs=4                            # 執行的行程數，根據官網說，和cpu數相同
process_name=asgi%(process_num)d    # 為每一個行程起不同的名字
autostart=true                        # 這兩個是自動啟動和恢復行程
autorestart=true

stdout_logfile=/root/mysite/logs/websocket.log    # 日志位置
redirect_stderr=true

啟動supervisor，加載組態檔，啟動之前先退出daphne -b 0.0.0.0 -p 8090 chatroom.asgi:application命令，不然會提示埠占用

supervisord -c /etc/supervisord.conf

啟動或者停止daphne

supervisorctl start daphne
supervisorctl stop daphne

supervisorctl stop all   #停止所有行程



supervisorctl reread                
supervisorctl update            # 這兩個命令是修改了組態檔后運行
supervisorctl reload            # 重新啟動

打開瀏覽器輸入遠程地址發現可以連接Django，同時websocket也能正常通信

現在已經成功部署了daphne+supervisor

下面的版塊尚未測驗成功，本來自己的網站是在Apache2上面運行的，結果還沒能部署成功，現在只能把網站分開成兩部分了，一部分運行在Apache2，一部分運行在daphne，有時間再解決下面的版塊的問題

（2）Apache2代理webscoket（此版塊尚未成功，留待解決）

websocket代理到Apache之前需要先將Django部署到Apache可參考我的另一篇帖子Ubuntu個人使用筆記整理

這里直接到websocket代理部分

修改Apache2組態檔

cd /etc/apache2/sites-available

暫時從nginx的配置相關帖子中找到下面的配置引數，需要加入到加入/etc/apache2/sites-available目錄下的自己的網站組態檔，比如000-default.conf，具體下面的引數怎么加，暫時留待解決，到此可以先使用daphne方式啟動，配置Apache2等我實驗成功再續寫


　　ProxyPass /ws ws://localhost:8000/ws                                                        #  websocket代理
    ProxyPassReverse /ws ws://localhost:8000/ws    
    ProxyRequests Off 
    ProxyMaxForwards 100 
    ProxyPreserveHost On


        proxy_pass http://wsbackend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;

重新加載apache2

sudo /etc/init.d/apache2 reload //重新加載
sudo /etc/init.d/apache2 restart //重啟apache服務

參考：

https://blog.csdn.net/weixin_42886895/article/details/89515365

https://www.cnblogs.com/wdliu/p/10032180.html

至此一個基本的聊天室已經基本完成，到這里通信部分就算告一段落了，下一篇帖子將會修改UI聊天面板原始碼并和后端通信結合，添加對話機器人，注冊登錄，加好友，群組，初步完成一個美觀的聊天室，效果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/3761.html

標籤：其他

上一篇：如何實作點贊按鈕圖片切換

下一篇：使用docker-compose安裝wordpress

Django用websocket實作聊天室之筑基篇

將Django + channel部署到daphne +supervisor 或部署到遠程apache2服務器

安裝supervisor

使用supervisor管理daphne行程

（2）Apache2代理webscoket（此版塊尚未成功，留待解決）

將Django + `channel部署到daphne +supervisor 或部署到遠程apache2服務器`