devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django利用Channels+websocket开发聊天室_django websocket channels

作者：凡人多烦事01 | 2024-03-27 23:23:51

赞

踩

django websocket channels

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、什么是Websocket？

2.Python-Django ASGI

3，Django开发聊天室或信息推送

前言

数据库系统课程设计要求，要开发一个B2B的售卖平台，本来开发浅薄的我，粗糙又基础的完成了一些基本的功能，想要开发一个单独的一对一聊天的功能(类似于微信这类)，查阅了不少资料，依旧没思路，但是却知晓了服务器推送信息和聊天室的开发，记个笔记。

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是Websocket？

1，Websocket的诞生背景：网站为了实现推送技术，用的基本是轮询，轮询是基于浏览器不断对服务器发出HTTP请求，服务器范围最新数据给客户端浏览器，这种模式缺点明显，带宽浪费严重，在这种背景下，HTML5诞生了Websocket协议，能更好的节省服务器资源并实现通讯。

2，WebSocket特点：WebSocket是单个TCP连接上的全双工通信，浏览器和服务器只需要完成一次握手，就可以创建持久性的连接，实现数据的双向传输。

2.Python-Django ASGI

1，WSGI：Python Web Server Gateway Interface，就是Web服务器网关接口，主要是规范了Web服务器和Web应用之间的交互，WSGI将Django分成了三类，服务器，APP，中间件。服务器就是用来监听某端口，APP用来调用某个函数，而中间件则位于两者中间，相当于一道门，起审核承接等作用。但是WSGI始终是为同步世界编写的，无法编写异步对象。因此，ASGI诞生了。

2，ASGI：Async Sever Gateway Interface，说白了，就是相当于WSGI+异步功能，而要调用WebSocket，Django就需要使用ASGI接口。

3，Django开发聊天室或信息推送

第一步：下载Channels模块

pip install channels

第二步：创建Django项目

Django-admin startproject websocket

创建后会看到Django3.0以后自存在asgi.py文件

第三步：创建一个APP应用

python manage.py startapp websocket_demo

第四步：进入settings.py模块，进行配置

首先在INSTALLED_APPS添加channels和websocket_demo

 然后添加再在settings中添加ASGI应用

 第五步：在创建的APP中创建routing.py文件以及进入asgi.py模块进行修改如下：

  1. import os
  2.  
  3. from django.core.asgi import get_asgi_application
  4. from channels.routing import ProtocolTypeRouter, URLRouter
  5. from websocket_demo import routing
  6.  
  7. os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'web_socket.settings')
  8.  
  9. application = ProtocolTypeRouter({
  10.     "http": get_asgi_application(),
  11.     "websocket": URLRouter(routing.websocket_urlpatterns),
  12.  
  13. })

图中代码很容易理解：将服务器的请求分成了两类，http请求则走默认的asgi APP流程，是Websocket请求则进入URL路由，即websocket_demo创建的routing.py文件

第六步，在websocket_demo的APP中views视图下创建chat.py并且配置routing.py的文件：

  1. from django.urls import re_path
  2. from websocket_demo.views import chat
  3.  
  4. websocket_urlpatterns = [
  5.     re_path(r'chat/(?P<group>\w+)/$', chat.ChatConsumer.as_asgi()),
  6. ]

使用正则路径匹配chat/数字/的路径，是则进入chat.py文件中的CharConsumer函数

第七步，在urls.py中配置路由，指向websocket_demo中的chat.py文件

  1. from django.urls import path, include
  2. from websocket_demo.views import chat
  3.  
  4. urlpatterns = [
  5.     path('index/', chat.chat)
  6. ]

第八步，编写chat.py文件的内容如下:

  1. from django.shortcuts import render
  2. from channels.generic.websocket import WebsocketConsumer
  3. from channels.exceptions import StopConsumer
  4. from asgiref.sync import async_to_sync
  5. from datetime import datetime
  6.  
  7.  
  8. def chat(request):
  9.     group_number = request.GET.get('num')
  10.     return render(request, 'web/index.html', context)
  11.  
  12.  
  13.  
  14.  
  15. class ChatConsumer(WebsocketConsumer):
  16.  
  17.     def websocket_connect(self, message):
  18.         self.accept()
  19.         group = self.scope['url_route']['kwargs'].get("group")
  20.         async_to_sync(self.channel_layer.group_add)(group, self.channel_name)
  21.  
  22.     def websocket_receive(self, message):
  23.         group = self.scope['url_route']['kwargs'].get("group")
  24.         async_to_sync(self.channel_layer.group_send)(group, {"type": "chat", 'message': message})
  25.  
  26.     def chat(self, event):
  27.         text = event['message']['text']
  28.         self.send(text)
  29.  
  30.     def websocket_disconnect(self, message):
  31.         group = self.scope['url_route']['kwargs'].get("group")
  32.         async_to_sync(self.channel_layer.group_discard)(group, self.channel_name)
  33.         print('客户端断开连接了')
  34.         raise StopConsumer()

首先第一个函数的意思是，进入index页面后会先进入chat函数，获取URL中请求的参数num，渲染到index.html页面，然后index.html页面使用javascript发起websocket请求，发起websocket请求后，ASGI服务器通过"websocket": URLRouter(routing.websocket_urlpatterns)路由访问routing文件，routing文件指向了ChatConsumer(WebsocketConsumer)类。

第二个函数ChatConsumer(WebsocketConsumer)类对websocket请求进行了处理，接收websocket的请求后获取组号即num的值，然后接收websocket发送的信息后调用chat函数将收到的信息同等的发送回去，websocket_disconnet则是客户端断开请求后触发的函数。

前端index.html的文件如下：

  reset.min.css文件:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

style.css文件:

        

  1. *, *:before, *:after {
  2.   box-sizing: border-box;
  3. }
  4.  
  5. :root {
  6.   --white: #fff;
  7.   --black: #000;
  8.   --bg: #f8f8f8;
  9.   --grey: #999;
  10.   --dark: #1a1a1a;
  11.   --light: #e6e6e6;
  12.   --wrapper: 1000px;
  13.   --blue: #00b0ff;
  14. }
  15.  
  16. body {
  17.   background-color: var(--bg);
  18.   -webkit-font-smoothing: antialiased;
  19.   -moz-osx-font-smoothing: grayscale;
  20.   text-rendering: optimizeLegibility;
  21.   font-family: 'Source Sans Pro', sans-serif;
  22.   font-weight: 400;
  23.   background-image: url("../img/image.jpg");
  24.   background-size: cover;
  25.   background-repeat: none;
  26. }
  27.  
  28. .wrapper {
  29.   position: relative;
  30.   left: 50%;
  31.   width: var(--wrapper);
  32.   height: 800px;
  33.   -webkit-transform: translate(-50%, 0);
  34.           transform: translate(-50%, 0);
  35. }
  36.  
  37. .container {
  38.   position: relative;
  39.   top: 50%;
  40.   left: 50%;
  41.   width: 80%;
  42.   height: 75%;
  43.   background-color: var(--white);
  44.   -webkit-transform: translate(-50%, -50%);
  45.           transform: translate(-50%, -50%);
  46. }
  47. .container .left {
  48.   float: left;
  49.   width: 37.6%;
  50.   height: 100%;
  51.   border: 1px solid var(--light);
  52.   background-color: var(--white);
  53. }
  54. .container .left .top {
  55.   position: relative;
  56.   width: 100%;
  57.   height: 96px;
  58.   padding: 29px;
  59. }
  60. .container .left .top:after {
  61.   position: absolute;
  62.   bottom: 0;
  63.   left: 50%;
  64.   display: block;
  65.   width: 80%;
  66.   height: 1px;
  67.   content: '';
  68.   background-color: var(--light);
  69.   -webkit-transform: translate(-50%, 0);
  70.           transform: translate(-50%, 0);
  71. }
  72. .container .left input {
  73.   float: left;
  74.   width: 188px;
  75.   height: 42px;
  76.   padding: 0 15px;
  77.   border: 1px solid var(--light);
  78.   background-color: #eceff1;
  79.   border-radius: 21px;
  80.   font-family: 'Source Sans Pro', sans-serif;
  81.   font-weight: 400;
  82. }
  83. .container .left input:focus {
  84.   outline: none;
  85. }
  86. .container .left a.search {
  87.   display: block;
  88.   float: left;
  89.   width: 42px;
  90.   height: 42px;
  91.   margin-left: 10px;
  92.   border: 1px solid var(--light);
  93.   background-color: var(--blue);
  94.   background-image: url("../img//name-type.png");
  95.   background-repeat: no-repeat;
  96.   background-position: top 12px left 14px;
  97.   border-radius: 50%;
  98. }
  99. .container .left .people {
  100.   margin-left: -1px;
  101.   border-right: 1px solid var(--light);
  102.   border-left: 1px solid var(--light);
  103.   width: calc(100% + 2px);
  104. }
  105. .container .left .people .person {
  106.   position: relative;
  107.   width: 100%;
  108.   padding: 12px 10% 16px;
  109.   cursor: pointer;
  110.   background-color: var(--white);
  111. }
  112. .container .left .people .person:after {
  113.   position: absolute;
  114.   bottom: 0;
  115.   left: 50%;
  116.   display: block;
  117.   width: 80%;
  118.   height: 1px;
  119.   content: '';
  120.   background-color: var(--light);
  121.   -webkit-transform: translate(-50%, 0);
  122.           transform: translate(-50%, 0);
  123. }
  124. .container .left .people .person img {
  125.   float: left;
  126.   width: 40px;
  127.   height: 40px;
  128.   margin-right: 12px;
  129.   border-radius: 50%;
  130. }
  131. .container .left .people .person .name {
  132.   font-size: 14px;
  133.   line-height: 22px;
  134.   color: var(--dark);
  135.   font-family: 'Source Sans Pro', sans-serif;
  136.   font-weight: 600;
  137. }
  138. .container .left .people .person .time {
  139.   font-size: 14px;
  140.   position: absolute;
  141.   top: 16px;
  142.   right: 10%;
  143.   padding: 0 0 5px 5px;
  144.   color: var(--grey);
  145.   background-color: var(--white);
  146. }
  147. .container .left .people .person .preview {
  148.   font-size: 14px;
  149.   display: inline-block;
  150.   overflow: hidden !important;
  151.   width: 70%;
  152.   white-space: nowrap;
  153.   text-overflow: ellipsis;
  154.   color: var(--grey);
  155. }
  156. .container .left .people .person.active, .container .left .people .person:hover {
  157.   margin-top: -1px;
  158.   margin-left: -1px;
  159.   padding-top: 13px;
  160.   border: 0;
  161.   background-color: var(--blue);
  162.   width: calc(100% + 2px);
  163.   padding-left: calc(10% + 1px);
  164. }
  165. .container .left .people .person.active span, .container .left .people .person:hover span {
  166.   color: var(--white);
  167.   background: transparent;
  168. }
  169. .container .left .people .person.active:after, .container .left .people .person:hover:after {
  170.   display: none;
  171. }
  172. .container .right {
  173.   position: relative;
  174.   float: left;
  175.   width: 62.4%;
  176.   height: 100%;
  177. }
  178. .container .right .top {
  179.   width: 100%;
  180.   height: 47px;
  181.   padding: 15px 29px;
  182.   background-color: #eceff1;
  183. }
  184. .container .right .top span {
  185.   font-size: 15px;
  186.   color: var(--grey);
  187. }
  188. .container .right .top span .name {
  189.   color: var(--dark);
  190.   font-family: 'Source Sans Pro', sans-serif;
  191.   font-weight: 600;
  192. }
  193. .container .right .chat {
  194.   position: relative;
  195.   display: none;
  196.   overflow: hidden;
  197.   padding: 0 35px 92px;
  198.   border-width: 1px 1px 1px 0;
  199.   border-style: solid;
  200.   border-color: var(--light);
  201.   height: calc(100% - 48px);
  202.   justify-content: flex-end;
  203.   flex-direction: column;
  204. }
  205. .container .right .chat.active-chat {
  206.   display: block;
  207.   display: flex;
  208. }
  209. .container .right .chat.active-chat .bubble {
  210.   transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
  211. }
  212. .container .right .chat.active-chat .bubble:nth-of-type(1) {
  213.   -webkit-animation-duration: 0.15s;
  214.           animation-duration: 0.15s;
  215. }
  216. .container .right .chat.active-chat .bubble:nth-of-type(2) {
  217.   -webkit-animation-duration: 0.3s;
  218.           animation-duration: 0.3s;
  219. }
  220. .container .right .chat.active-chat .bubble:nth-of-type(3) {
  221.   -webkit-animation-duration: 0.45s;
  222.           animation-duration: 0.45s;
  223. }
  224. .container .right .chat.active-chat .bubble:nth-of-type(4) {
  225.   -webkit-animation-duration: 0.6s;
  226.           animation-duration: 0.6s;
  227. }
  228. .container .right .chat.active-chat .bubble:nth-of-type(5) {
  229.   -webkit-animation-duration: 0.75s;
  230.           animation-duration: 0.75s;
  231. }
  232. .container .right .chat.active-chat .bubble:nth-of-type(6) {
  233.   -webkit-animation-duration: 0.9s;
  234.           animation-duration: 0.9s;
  235. }
  236. .container .right .chat.active-chat .bubble:nth-of-type(7) {
  237.   -webkit-animation-duration: 1.05s;
  238.           animation-duration: 1.05s;
  239. }
  240. .container .right .chat.active-chat .bubble:nth-of-type(8) {
  241.   -webkit-animation-duration: 1.2s;
  242.           animation-duration: 1.2s;
  243. }
  244. .container .right .chat.active-chat .bubble:nth-of-type(9) {
  245.   -webkit-animation-duration: 1.35s;
  246.           animation-duration: 1.35s;
  247. }
  248. .container .right .chat.active-chat .bubble:nth-of-type(10) {
  249.   -webkit-animation-duration: 1.5s;
  250.           animation-duration: 1.5s;
  251. }
  252. .container .right .write {
  253.   position: absolute;
  254.   bottom: 29px;
  255.   left: 30px;
  256.   height: 42px;
  257.   padding-left: 8px;
  258.   border: 1px solid var(--light);
  259.   background-color: #eceff1;
  260.   width: calc(100% - 58px);
  261.   border-radius: 5px;
  262. }
  263. .container .right .write input {
  264.   font-size: 16px;
  265.   float: left;
  266.   width: 347px;
  267.   height: 40px;
  268.   padding: 0 10px;
  269.   color: var(--dark);
  270.   border: 0;
  271.   outline: none;
  272.   background-color: #eceff1;
  273.   font-family: 'Source Sans Pro', sans-serif;
  274.   font-weight: 400;
  275. }
  276. .container .right .write .write-link.attach:before {
  277.   display: inline-block;
  278.   float: left;
  279.   width: 20px;
  280.   height: 42px;
  281.   content: '';
  282.   background-image: url("../img/attachment.png");
  283.   background-repeat: no-repeat;
  284.   background-position: center;
  285. }
  286. .container .right .write .write-link.smiley:before {
  287.   display: inline-block;
  288.   float: left;
  289.   width: 20px;
  290.   height: 42px;
  291.   content: '';
  292.   background-image: url("../img/smiley.png");
  293.   background-repeat: no-repeat;
  294.   background-position: center;
  295. }
  296. .container .right .write .write-link.send:before {
  297.   display: inline-block;
  298.   float: left;
  299.   width: 20px;
  300.   height: 42px;
  301.   margin-left: 11px;
  302.   content: '';
  303.   background-image: url("../img/send.png");
  304.   background-repeat: no-repeat;
  305.   background-position: center;
  306. }
  307. .container .right .bubble {
  308.   font-size: 16px;
  309.   position: relative;
  310.   display: inline-block;
  311.   clear: both;
  312.   margin-bottom: 8px;
  313.   padding: 13px 14px;
  314.   vertical-align: top;
  315.   border-radius: 5px;
  316. }
  317. .container .right .bubble:before {
  318.   position: absolute;
  319.   top: 19px;
  320.   display: block;
  321.   width: 8px;
  322.   height: 6px;
  323.   content: '\00a0';
  324.   -webkit-transform: rotate(29deg) skew(-35deg);
  325.           transform: rotate(29deg) skew(-35deg);
  326. }
  327. .container .right .bubble.you {
  328.   float: left;
  329.   color: var(--white);
  330.   background-color: var(--blue);
  331.   align-self: flex-start;
  332.   -webkit-animation-name: slideFromLeft;
  333.           animation-name: slideFromLeft;
  334. }
  335. .container .right .bubble.you:before {
  336.   left: -3px;
  337.   background-color: var(--blue);
  338. }
  339. .container .right .bubble.me {
  340.   float: right;
  341.   color: var(--dark);
  342.   background-color: #eceff1;
  343.   align-self: flex-end;
  344.   -webkit-animation-name: slideFromRight;
  345.           animation-name: slideFromRight;
  346. }
  347. .container .right .bubble.me:before {
  348.   right: -3px;
  349.   background-color: #eceff1;
  350. }
  351. .container .right .conversation-start {
  352.   position: relative;
  353.   width: 100%;
  354.   margin-bottom: 27px;
  355.   text-align: center;
  356. }
  357. .container .right .conversation-start span {
  358.   font-size: 14px;
  359.   display: inline-block;
  360.   color: var(--grey);
  361. }
  362. .container .right .conversation-start span:before, .container .right .conversation-start span:after {
  363.   position: absolute;
  364.   top: 10px;
  365.   display: inline-block;
  366.   width: 30%;
  367.   height: 1px;
  368.   content: '';
  369.   background-color: var(--light);
  370. }
  371. .container .right .conversation-start span:before {
  372.   left: 0;
  373. }
  374. .container .right .conversation-start span:after {
  375.   right: 0;
  376. }
  377.  
  378. @keyframes slideFromLeft {
  379.   0% {
  380.     margin-left: -200px;
  381.     opacity: 0;
  382.   }
  383.   100% {
  384.     margin-left: 0;
  385.     opacity: 1;
  386.   }
  387. }
  388. @-webkit-keyframes slideFromLeft {
  389.   0% {
  390.     margin-left: -200px;
  391.     opacity: 0;
  392.   }
  393.   100% {
  394.     margin-left: 0;
  395.     opacity: 1;
  396.   }
  397. }
  398. @keyframes slideFromRight {
  399.   0% {
  400.     margin-right: -200px;
  401.     opacity: 0;
  402.   }
  403.   100% {
  404.     margin-right: 0;
  405.     opacity: 1;
  406.   }
  407. }
  408. @-webkit-keyframes slideFromRight {
  409.   0% {
  410.     margin-right: -200px;
  411.     opacity: 0;
  412.   }
  413.   100% {
  414.     margin-right: 0;
  415.     opacity: 1;
  416.   }
  417. }

index.js文件:

                

  1. document.querySelector('.chat[data-chat=person2]').classList.add('active-chat');
  2. document.querySelector('.person[data-chat=person2]').classList.add('active');
  3.  
  4. var friends = {
  5.   list: document.querySelector('ul.people'),
  6.   all: document.querySelectorAll('.left .person'),
  7.   name: '' },
  8.  
  9. chat = {
  10.   container: document.querySelector('.container .right'),
  11.   current: null,
  12.   person: null,
  13.   name: document.querySelector('.container .right .top .name') };
  14.  
  15.  
  16. friends.all.forEach(function (f) {
  17.   f.addEventListener('mousedown', function () {
  18.     f.classList.contains('active') || setAciveChat(f);
  19.   });
  20. });
  21.  
  22. function setAciveChat(f) {
  23.   friends.list.querySelector('.active').classList.remove('active');
  24.   f.classList.add('active');
  25.   chat.current = chat.container.querySelector('.active-chat');
  26.   chat.person = f.getAttribute('data-chat');
  27.   chat.current.classList.remove('active-chat');
  28.   chat.container.querySelector('[data-chat="' + chat.person + '"]').classList.add('active-chat');
  29.   friends.name = f.querySelector('.name').innerText;
  30.   chat.name.innerHTML = friends.name;
  31. }

index.html文件:

  1. {% load static from static %}
  2. <!DOCTYPE html>
  3. <html lang="en" >
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>聊天窗口界面</title>
  8.  
  9. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
  10. <link rel="stylesheet" href="{% static 'web/chat/css/reset.min.css' %}">
  11. <link rel="stylesheet" href="{% static 'web/chat/css/style.css' %}">
  12.  
  13. </head>
  14. <body>
  15.  
  16. <div class="wrapper">
  17. 	<div class="container">
  18.         <div class="left">
  19.             <div class="top">
  20.                 <input type="text" placeholder="Search" />
  21.                 <a href="javascript:;" class="search"></a>
  22.             </div>
  23.             <ul class="people">
  24.                 <li class="person" data-chat="person2">
  25.                     <img src="/static/myadmin/dist/img/user2-160x160.jpg" alt="" />
  26.                     <span class="name">{{admin_name}}</span>
  27.                     <span class="preview">I was wondering...</span>
  28.                 </li>
  29.             </ul>
  30.         </div>
  31.         <div class="right">
  32.             <div class="top"><span>To: <span class="name">{{admin_name}}</span></span></div>
  33.             <div class="chat" data-chat="person2" id="chat-send" >
  34.                 <div class="conversation-start">
  35.                     <span>{{time}}</span>
  36.                 </div>
  37.             </div>
  38.             <div class="write">
  39.                 <a href="javascript:;" class="write-link attach"></a>
  40.                 <input type="text" id="text"/>
  41.                 <a href="javascript:;" class="write-link smiley"></a>
  42.                 <a onclick="sendMessage()"  class="write-link send"></a>
  43.             </div>
  44.         </div>
  45.     </div>
  46. </div>
  47.  
  48. <script  src="{% static 'web/chat/js/index.js' %}"></script>
  49. <script type="text/javascript">
  50.     var socket=new WebSocket("ws://127.0.0.1:8000/chat/{{group_number}}/");
  51.     socket.onopen = function(event)
  52. 	{
  53. 	var tag=document.getElementById("chat-send");
  54. 	var d=document.createElement("div");
  55. 	d.className="bubble you";
  56. 	d.innerHTML ="连接成功";
  57. 	tag.appendChild(d);
  58. 	}
  59.     function sendMessage(){
  60. 	let text=document.getElementById("text");
  61. 	var tag=document.getElementById("chat-send");
  62. 	var d=document.createElement("div");
  63. 	d.className="bubble me";
  64. 	d.innerHTML =text.value;
  65. 	tag.appendChild(d);
  66. 	socket.send(text.value);
  67. 	text.value=" ";
  68. 	}
  69. 	socket.onclose = function(){
  70. 	var tag=document.getElementById("chat-send");
  71. 	var d=document.createElement("div");
  72. 	d.className="bubble you";
  73. 	d.innerHTML ="服务器主动断开连接";
  74. 	tag.appendChild(d);
  75. }
  76. socket.onmessage=function(event){
  77.     var tag=document.getElementById("chat-send");
  78. 	var d=document.createElement("div");
  79. 	d.className="bubble you";
  80. 	d.innerHTML =event.data;
  81. 	tag.appendChild(d);
  82. 	}
  83. </script>
  84. <div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  85. </div>
  86. </body>
  87. </html>

主要看javascript使用的函数，首先进行Websocket请ws://127.0.0.1:8000/chat/{{group_number}}/，然后分别的通过websocket发送信息，接受信息。

第九步，启动manage.py文件，同时打开两个页面观看效果:

        

可以看到，某个用户发送的信息，将会被服务器发送到同一聊天室的所有客户端，实现了信息推送的功能。 

但是要实现一对一聊天的功能，目前实现是没有思路，有大神看到烦请指点指点。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/327534
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号