脚本之家，脚本语言编程技术及教程分享平台！
分类导航

Python|VBS|Ruby|Lua|perl|VBA|Golang|PowerShell|Erlang|autoit|Dos|bat|

服务器之家 - 脚本之家 - Python - 基于django channel实现websocket的聊天室的方法示例

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

2021-06-14 00:57wangfeng7399 Python

这篇文章主要介绍了基于基于django channel实现websocket的聊天室的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

websocket

  • 网易聊天室?
  • ​ web微信?
  • ​ 直播?

假如你工作以后,你的老板让你来开发一个内部的微信程序,你需要怎么办?我们先来分析一下里面的技术难点

  • 消息的实时性?
  • 实现群聊

现在有这样一个需求,老板给到你了,关乎你是否能转正?你要怎么做?

我们先说消息的实时性,按照我们目前的想法是我需要用http协议来做,那么http协议怎么来做那?

是不是要一直去访问我们的服务器,问服务器有没有人给我发消息,有没有人给我发消息?那么大家认为我多长时间去访问一次服务比较合适那? 1分钟1次?1分钟60次?那这样是不是有点问题那?咱们都知道http发起一次请求就需要三次握手,四次断开,那么这样是不是对我服务器资源是严重的浪费啊?对我本地的资源是不是也是严重的浪费啊?这种方式咱们是不是一直去服务器问啊?问有没有我的信息?有我就显示?这种方式咱们一般称为轮询

http协议:

​ 一次请求 一次相应 断开

​ 无状态的 - 你曾经来过 session or cookie

​ 在断开的情况下如果有数据只能等下次再访问的时候返回

那么我们先来总结一下,轮询优缺点

轮询02年之前使用的都是这种技术

​ 每分钟访问60次服务器

​ 优点:消息就基本实时

缺点:双资源浪费

长轮询2000-现在一直在使用

客户端发送一个请求- 服务器接受请求-不返回- 阻塞等待客户端-如果有消息了-返回给客户端

然后客户端立即请求服务器

​ 优点:节省了部分资源,数据实时性略差

​ 缺点:断开连接次数过多

那有没有一种方法是:我的服务器知道我的客户端在哪?有客户端的消息的时候我就把数据发给客户端

websocket是一种基于tcp的新网络协议,它实现了浏览器和服务器之间的双全工通信,允许服务端直接向客户端发送数据

websocket 是一个长连接

现在咱们的前端已经支持websocket协议了,可以直接使用websocket

简单应用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>

优化前端代码

?
1
2
3
4
5
6
7
8
9
10
11
12
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服务端

准备前端页面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 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，使其返回数据

?
1
2
3
4
5
# chat/views.py
from django.shortcuts import render
 
def index(request):
  return render(request, 'chat/index.html', {})

修改url

?
1
2
3
4
5
6
from django.conf.urls import url
from .views import *
 
urlpatterns = [
  url(r'^$', index, name='index'),
  ]

跟settings同级目录下创建routing.py 文件

?
1
2
3
4
5
6
# mysite/routing.py
from channels.routing import protocoltyperouter
 
application = protocoltyperouter({
  # (http->django views is added by default)
})

编辑settings文件,将channels添加到installed_apps里面

?
1
2
3
4
5
6
7
8
9
10
installed_apps = [
  'channels',
  'chat',
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
]

并添加channel的配置信息

?
1
asgi_application = 'mysite.routing.application'

准备聊天室的页面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- 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文件，使其返回页面

?
1
2
3
4
def room(request, room_name):
  return render(request, 'chat/room.html', {
    'room_name_json':json.dumps(room_name)
  })

修改url

?
1
2
3
4
5
6
7
8
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'),
]

实现简单的发送返回

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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的路由

?
1
2
3
4
5
6
7
8
# chat/routing.py
from django.conf.urls import url
 
from . import consumers
 
websocket_urlpatterns = [
  url(r'^ws/chat/(?p<room_name>[^/]+)/$', consumers.chatconsumer),
]

修改application的信息

?
1
2
3
4
5
6
7
8
9
10
11
12
13
# 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
    )
  ),
})

执行数据库的迁移命令

?
1
python manage.py migrate

要实现群聊功能，还需要准备redis

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

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

?
1
2
3
4
5
6
7
8
9
10
11
# 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文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
    }))

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://blog.51cto.com/wangfeng7399/2376042

  • django
  • 聊天室
  • WebSocket
  • channel

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    2048 　 6006 　 contextlib 　 SLOTS 　 MELIAE 　 FEEDPARSER 　 暂存 　 持久性管理 　 pickle模块 　 THREADING 　 reduce 　 nignx 　 装饰器 　 函数式编程 　 兔子毒药 　 监控文件 　 流量监控 　 Web框架 　 办公工具 　 PIL库 　 高斯模糊 　 wxPython 　 import 　 自定义模块 　 Python开发 　 元类 　 metaclass 　 魔术方法 　 DNSPod 　 动态解析域名 　
    © 2019-2023 脚本之家 | 服务器之家(www.zzvips.com)旗下站点 版权所有关于我们联系我们版权申明网站地图