首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

基于django channel实现websocket的聊天室的方法示例

Posted in Python onApril 11, 2019

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的聊天室的方法示例

- Author -

wangfeng7399

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python3实现163邮箱SMTP发送邮件
May 22 Python
python实现对求解最长回文子串的动态规划算法
Jun 02 Python
python将txt文档每行内容循环插入数据库的方法
Dec 28 Python
利用ctypes获取numpy数组的指针方法
Feb 12 Python
Python collections模块使用方法详解
Aug 28 Python
VSCode中自动为Python文件添加头部注释
Nov 14 Python
python3 pathlib库Path类方法总结
Dec 26 Python
深入浅析python的第三方库pandas
Feb 13 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
Apr 02 Python
Python 实现自动完成A4标签排版打印功能
Apr 09 Python
python和anaconda的区别
May 06 Python
如何利用python实现列表嵌套字典取值
Jun 10 Python
CentOS7安装Python3的教程详解
Apr 10 #Python
django富文本编辑器的实现示例
Apr 10 #Python
详解Python:面向对象编程
Apr 10 #Python
5款Python程序员高频使用开发工具推荐
Apr 10 #Python
python初学者，用python实现基本的学生管理系统（python3）代码实例
Apr 10 #Python
Python将json文件写入ES数据库的方法
Apr 10 #Python
pycharm创建一个python包方法图解
Apr 10 #Python
反射(1) ip2region(1) scrapy(1) Postman(1) Quartz(1) dataBinding(1) BottomSheetDialog(1) DeOldify(1) 注解(1) virtualenv(1)
You might like
咖啡因含量是由谁决定的？低因咖啡怎么来？低因咖啡适合什么人喝
2021/03/06 新手入门
一个odbc连mssql分页的类
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php类自动加载器实现方法
2015/07/28 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
javascript学习笔记（五）正则表达式
2011/04/08 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
利用VUE框架，实现列表分页功能示例代码
2017/01/12 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
Vue 2.5 Level E 发布了： 新功能特性一览
2017/10/24 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python编码类型转换方法详解
2016/07/01 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Python读写压缩文件的方法
2020/07/30 Python
French Connection官网：女装、男装及家居用品
2019/03/18 全球购物
英国门销售网站：Green Tree Doors
2020/01/07 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
详解python字符串驻留技术
2021/05/21 Python