2. 程式人生 > >基於django channel 實現websocket的聊天室

基於django channel 實現websocket的聊天室

阿新 • • 發佈：2019-04-09
cati import 浪費 pip 鏈接 配置 ner templates oca

websocket

? 網易聊天室?

? web微信?

? 直播?

假如你工作以後,你的老板讓你來開發一個內部的微信程序,你需要怎麽辦?我們先來分析一下裏面的技術難點

  • 消息的實時性?
  • 實現群聊

現在有這樣一個需求,老板給到你了,關乎你是否能轉正?你要怎麽做?

我們先說消息的實時性,按照我們目前的想法是我需要用http協議來做,那麽http協議怎麽來做那?

是不是要一直去訪問我們的服務器,問服務器有沒有人給我發消息,有沒有人給我發消息?那麽大家認為我多長時間去訪問一次服務比較合適那? 1分鐘1次?1分鐘60次?那這樣是不是有點問題那?咱們都知道http發起一次請求就需要三次握手,四次斷開,那麽這樣是不是對我服務器資源是嚴重的浪費啊?對我本地的資源是不是也是嚴重的浪費啊?這種方式咱們是不是一直去服務器問啊?問有沒有我的信息?有我就顯示?這種方式咱們一般稱為輪詢

http協議:

? 一次請求 一次相應 斷開

? 無狀態的 - 你曾經來過 session or cookie

? 在斷開的情況下如果有數據只能等下次再訪問的時候返回

那麽我們先來總結一下,輪詢優缺點

輪詢 02年之前使用的都是這種技術

? 每分鐘訪問60次服務器

? 優點:消息就基本實時

缺點:雙資源浪費

長輪詢 2000-現在一直在使用

客戶端發送一個請求- 服務器接受請求-不返回- 阻塞等待客戶端-如果有消息了-返回給客戶端

然後客戶端立即請求服務器

? 優點:節省了部分資源,數據實時性略差

? 缺點:斷開連接次數過多

那有沒有一種方法是:我的服務器知道我的客戶端在哪?有客戶端的消息的時候我就把數據發給客戶端

websocket是一種基於tcp的新網絡協議,它實現了瀏覽器和服務器之間的雙全工通信,允許服務端直接向客戶端發送數據

websocket 是一個長連接

現在咱們的前端已經支持websocket協議了,可以直接使用websocket

簡單應用

<body>
    <!-- 輸入內容-->
    <input type="text" id="input">
    <!-- 提交數據-->
    <button> 提交數據</button>
    <!-- 顯示內容-->
    <div>
        <div ></div>
    </div>

<script>
    var input=document.getElementById(‘input‘);
    var button=document.querySelector(‘button‘);
    var message=document.querySelector(‘div‘);
    //websocket在瀏覽器端如何使用
    //現在html已經提供了websocket,我們可以直接使用
    var socket= new WebSocket(‘ws://echo.websocket.org‘);
    socket.onopen=function () {
        message.innerHTML=‘連接成功了‘
    };
    //socket.addEventListener(‘open‘,function (data) {
     //    message.innerHTML=‘連接成功了‘
    //});
    //點擊事件
    button.onclick=function () {
        request=input.value;
        socket.send(request)
    }
    //獲取返回數據
    socket.onmessage=function (data) {
        message.innerHTML=data.data
    };
    socket.onclose=function (data) {
        message.innerHTML=data.data
    }

</script>

</body>

優化前端代碼

 button.onclick=function () {
        request=input.value;
        socket.send(request);
        input.value=‘‘
    }
    //獲取返回數據
    socket.onmessage = function (data) {
        var dv=document.createElement(‘div‘);
        dv.innerHTML=data.data;
        message.appendChild(dv)

    };

websocket 事件

事件 事件處理函數 描述
open socket.onopen 連接建立是觸發
message socket.onmessage 客戶端收到服務端數據是觸發
error socket.error 通信發生錯誤時觸發
close socket.close 連接關閉時觸發

websocket方法

方法 描述
socket.send() 使用連接發送數據
socket.close() 關閉連接

websocke treadyState值的狀態

值 描述
0 (CONNECTING) 正在鏈接中
1 (OPEN) 已經鏈接並且可以通訊
2 (CLOSING) 連接正在關閉
3 (CLOSED) 連接已關閉或者沒有鏈接成功

自建websocket服務端

準備前端頁面

<!-- 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 = ‘/web/‘ + roomName + ‘/‘;
        };
    </script>
</body>
</html>

編輯django的views，使其返回數據

# chat/views.py
from django.shortcuts import render

def index(request):
    return render(request, ‘chat/index.html‘, {})

修改url

from django.conf.urls import url
from .views import *

urlpatterns = [
    url(r‘^$‘, index, name=‘index‘),
    ]

跟settings同級目錄下創建routing.py 文件

# mysite/routing.py
from channels.routing import ProtocolTypeRouter

application = ProtocolTypeRouter({
    # (http->django views is added by default)
})

編輯settings文件,將channels添加到installed_apps裏面

INSTALLED_APPS = [
    ‘channels‘,
    ‘chat‘,
    ‘django.contrib.admin‘,
    ‘django.contrib.auth‘,
    ‘django.contrib.contenttypes‘,
    ‘django.contrib.sessions‘,
    ‘django.contrib.messages‘,
    ‘django.contrib.staticfiles‘,
]

並添加channel的配置信息

ASGI_APPLICATION = ‘mysite.routing.application‘

準備聊天室的頁面

<!-- chat/templates/chat/room.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|safe }};

    var chatSocket = new WebSocket(
        ‘ws://‘ + window.location.host +
        ‘/ws/chat/‘ + roomName + ‘/‘);

    chatSocket.onmessage = function(e) {
        var data = JSON.parse(e.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>

準備views文件，使其返回頁面

def room(request, room_name):
    return render(request, ‘chat/room.html‘, {
        ‘room_name_json‘:json.dumps(room_name)
    })

修改url

from django.conf.urls import url

from . import views

urlpatterns = [
    url(r‘^$‘, views.index, name=‘index‘),
    url(r‘^(?P<room_name>[^/]+)/$‘, views.room, name=‘room‘),
]

實現簡單的發送返回

from channels.generic.websocket import WebsocketConsumer
import json

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()

    def disconnect(self, close_code):
        pass

    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json[‘message‘]

        self.send(text_data=json.dumps({
            ‘message‘: message
        }))

創建ws的路由

# chat/routing.py
from django.conf.urls import url

from . import consumers

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

修改application的信息

# mysite/routing.py
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat.routing

application = ProtocolTypeRouter({
    # (http->django views is added by default)
    ‘websocket‘: AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

執行數據庫的遷移命令

python manage.py migrate

要實現群聊功能，還需要準備redis

docker run -p 6379:6379 -d redis:2.8
pip3 install channels_redis

將redis添加到settings的配置文件中

# mysite/settings.py
# Channels
ASGI_APPLICATION = ‘mysite.routing.application‘
CHANNEL_LAYERS = {
    ‘default‘: {
        ‘BACKEND‘: ‘channels_redis.core.RedisChannelLayer‘,
        ‘CONFIG‘: {
            "hosts": [(‘127.0.0.1‘, 6379)],
        },
    },
}

修改consumer.py文件

from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
import json

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.room_name = self.scope[‘url_route‘][‘kwargs‘][‘room_name‘]
        self.room_group_name = ‘chat_%s‘ % self.room_name

        # Join room group
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )

        self.accept()

    def disconnect(self, close_code):
        # Leave room group
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
        )

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

        # Send message to room group
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                ‘type‘: ‘chat_message‘,
                ‘message‘: message
            }
        )

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

        # Send message to WebSocket
        self.send(text_data=json.dumps({
            ‘message‘: message
        }))

基於django channel 實現websocket的聊天室

相關推薦

基於django channel 實現websocket的聊天室

cati import 浪費 pip 鏈接 配置 ner templates oca websocket ? 網易聊天室? ? web微信? ? 直播? 假如你工作以後,你的老板讓你來開發一個內部的微信程序,你需要怎麽辦?我們先來分析一下裏面的技術難點 消息的

PHP簡單實現WebSocket(聊天室)

在PHP中，開發者需要考慮的東西比較多，從socket的連線、建立、繫結、監聽等都需要開發者自己去操作完成，對於初學者來說，難度方面也挺大的，所以本文的思路如下： 1、socket協議的簡介 2、介紹client與server之間的連線原理 3、PHP中建立socket的過程講解 4

用 Netty 實現 WebSocket 聊天室功能

WebSocket 是 H5 的一種技術，目前有很多語言都有相應的實現，之前有用 WebSocket 實現過 Java 和安卓，IOS 通訊的專案。想來也該分享一下，看過不少專案要實現頁面資料實時更新的操作，有用輪詢有用 Socket 連結的，當然也不排除有很多前端其他技術可以實現，WebSocke

Linux下基於UDP協議實現的聊天室專案（附原始碼）

好久沒來更新了，這段時間一直在著手完成這個專案，由於之前沒有接觸過這種稍大型的專案，而且對於C/S架構以及UDP通訊的瞭解也不是很深，所以前面很大的一段時間都被浪費掉了，做了很大無用功。 剛開始弄的時候，也是在網上搜了很多資料，找了很多版本，發現大都有

Node.js實現WebSocket聊天室的例子

對於聊天室，大家應該都不陌生，筆者也寫過很多關於聊天室的例子。 本節，我們將演示如何通過Node.js來實現一個WebSocket

基於Netty實現的WebSocket聊天室--支援多人同時線上及定時心跳檢測

專案簡介 基於Netty實現的WebSocket聊天室，實現的功能如下： 支援暱稱登入； 支援多人同時線上； 同步顯示線上人數； 支援文字和表情的內容； 瀏覽器與伺服器保持長連線，定時心跳檢測；

基於flask框架，使用websocket實現一對一聊天室功能

info app lan 提示 function _id 數據 sca 響應 後端代碼： from flask import Flask,request,render_template from geventwebsocket.handler import WebSock

web即時通訊2--基於Spring websocket實現web聊天室

          本文使用Spring4和websocket搭建一個web聊天室，框架基於SpringMVC+Spring+Hibernate的Maven專案，後臺使用spring websocket進行訊息轉發和聊天訊息快取。客戶端使用socket.js和stomp.j

html5 websocket + node.js 實現網頁聊天室

1 client:    socket.io    server:   node.js +  express  + socket.io   一個簡單的聊天室  demo，沒有註冊，內建了一些測試使用者

百度t7 課程， websocket 實現簡單聊天室

最簡單的聊天室，我寫了一個小時， 寫了10 分鐘，除錯50分鐘 因為 我是小菜鳥，不過凡事都有過程 index.html <!DOCTYPE html> <html lang="en"> <head> <meta c

基於UDP的網路程式設計實現簡單聊天室

import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAddress; import java.util.Scanner; pu

Go websocket 聊天室的詳細實現和詳細分析

websocket 聊天室資料結構分析 首先要做一個聊天室我們需要把所有的連線資訊都儲存下來 所以就需要有一個客戶端 client 的 manager ，manager 裡應該儲存所有的client 資訊 所以在我們的程式裡定義了 ClientManager 這個

Node.js websocket 使用 socket.io庫實現實時聊天室

認識websocket WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊(full-duple)。一開始的握手需要藉助HTTP請求完成。 其實websocket 並不是很依賴Http協議，它也擁有自己的一套協議

基於linux的TCP網路聊天室設計與實現

利用Linux實現基於TCP模式的網路聊天程式 主要完成的兩大組成部分為：伺服器和客戶端。 伺服器程式主要負責監聽客戶端發來的訊息。 客戶端需要登入到伺服器端才可以實現正常的聊天功能。該程式是利用程序以及共享記憶體來實現群傳送訊息的。 以下簡單分析一下

Node.js+websocket+mongodb實現即時聊天室

高並發 集合 ejs 部署 思路 平臺 fff tro 賬號 ChatRoom Node.js+websocket+mongodb實現即時聊天室 A，nodejs簡介：Node.js是一個可以讓javascript運行在服務器端的平臺，它可以讓javascript脫離瀏覽器

php+websocket實現線上聊天室(二)

上一篇部落格我們完成了服務端的基本結構，這一篇部落格我們就來把它豐富起來以實現聊天室的功能。 1.整理需求 1.進行三人隨機匹配 2.取消匹配 3.傳送訊息 4.離開房間 5.獲取當前線上人數 2.規定訊息格式 我們使用json來傳遞

使用nodejs-websocket 20行程式碼實現簡單聊天室

安裝nodejs-websocket： npm install nodejs-websocketindex.html<!DOCTYPE html> <html> <hea

Python實現文字聊天室

跟著 tro 通過 客戶端 發送 cnblogs ima 命令 圖形 你是否想過用所學的Python開發一個圖形界面的聊天室程序啊？ 像這樣的： 如果你想開發這樣一個有點懷舊風格的聊天程序，那麽可以接著看； 要開發這個聊天程序，你需要具備以下知識點： asyncore

Python實現web聊天室

支持 put all rem message one utf cti 訪問 使用Python模塊中的select模塊實現web聊天室功能select模塊Python中的select模塊專註於I/O多路復用，提供了select poll epoll三個方法(其中後兩個在L

實現簡易聊天室（一）

ima log body .com 麻煩 導入 定義 右鍵 正常 預備工作： （1）讀取文件的時候可能會遇到多個文件一起傳，可以用線程池。 （2）發送不同類型的請求時，如發送的是聊天信息，發送的是文件，發送的是好友上線請求等，但對於接受者來說都是字節流無法分別，這就需要我們