最近閑來無事，無意發現一個聊天室的前端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，並在目錄中創建一個名為templateschat.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://:password@127.0.0.1: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目錄下的目錄中創建一個名為templateschatroom.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=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服務器
daphne +supervisor 或部署到遠程apache2服務器到此已經完成了聊天室的基本通信功能，但是一直在本地調試，接下來需要將Django + channel正式部署到遠程服務器，形成上線雛形，這里使用以下兩種部署方式 daphne+supervisor
（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加入配置
打開瀏覽器輸入遠程地址發現可以連接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聊天面板源碼並和后端通信結合，添加對話機器人，注冊登錄，加好友，群組，初步完成一個美觀的聊天室，效果：
