docker-django-chat-room

docker-django-chat-room use django-channels3💬

• Youtube Tutorial - chat-room use django-channels2

前言

這篇文章是 django-channels2-tutorial 的改良版，主要加上美化以及資料庫。

執行畫面

直接瀏覽 http://localhost:8000/chat/

未登入無法聊天（ 也無法看到聊天內容 ）

登入註冊頁面

聊天畫面

如何執行

確認電腦有安裝 docker 後，直接執行以下指令即可，

docker-compose up

如何移除 ( 包含移除 volume )，

docker-compose down -v

詳細的詳細說明，在上一篇 django-channels2-tutorial 都說明過了。

其他說明

說明一

登入註冊是參考之前寫的教學完成，可參考 Django Social Login Tutorial，我有簡化一些不必要的部份，

但大多都是直接拿過來使用的。

說明二

為什麼需要使用到 reconnecting-websocket，原因是假設當 websocket 斷線時，他並不會自動重新連結，

我們可以透過這個 js ，幫我們完成當 websocket 斷線時，自動重新連線的工作。

說明三

js 中的 {{ room_name }} 用法，像是在 django_chat_room/chat/templates/chat/room.html 中的

....
$('#all_messages').scrollTop($('#all_messages')[0].scrollHeight);
var room_mame = '{{ room_name }}';
var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
var websocket_str= ws_scheme+'://' + window.location.host + '/ws/chat/' + room_mame + '/';
var chatSocket = new ReconnectingWebSocket(websocket_str);
...

為什麼可以使用 {{ room_name }} 這種寫法，原因是 jinja2 的關係，不過這樣就不能單獨把這段 js 獨立

出來成一隻 .js 檔案，因為這樣的話 jinja2 就會失效，但如果真的硬要抽出來也是可以，我們可以把它 render

到某個 hidden 的欄位，然後再用 js 去抓他的值。

後記

依照 django-channels2-tutorial 這篇的基本觀念，延伸出一個比較完整的聊天室，

整體來說，蠻好玩的 😆 這邊一樣沒有佈署，本來想佈署到 Heroku，但因為需要用

到 redis ( 要信用卡 )，所以就沒佈署了，相關的部屬流程，可參考官網的 Deploying。

執行環境

• Python 3.8

Reference

• Django
• Channels
• reconnecting-websocket
• 聊天室版型

Donation

文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡😆

贊助者付款

License

MIT licens