Shulou(Shulou.com)06/01 Report--

The editor of this article introduces in detail "how Django uses channels+websocket to create an online chat room". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how Django uses channels+websocket to create an online chat room" can help you solve your doubts.

What is websocket?

WebSocket is a protocol that HTML5 began to provide for full-duplex communication over a single TCP connection. WebSocket makes it easier to exchange data between the client and the server, allowing the server to actively push data to the client. In WebSocket API, only one handshake is needed between the browser and the server, and a persistent connection can be directly created between the browser and the server for two-way data transmission.

In order to implement the push technology, many websites use Ajax polling. Polling is a browser in which the browser issues a HTTP request to the server at a specific time interval (such as every 1 second), and then the server returns the latest data to the client. This traditional mode brings obvious disadvantages, that is, browsers need to constantly send requests to the server, but HTTP requests may contain long headers, in which the really effective data may be only a small part, which will obviously waste a lot of bandwidth and other resources. Websocket can better save server resources and bandwidth, and can communicate in real time, which has become a very popular technology that must be mastered.

The first step is preparation.

First, install django and channels in the virtual environment (this project uses the latest version, both 3.x version), create a new project called myproject, and create a new app named chat. If the installation error under windows, how to solve their own online to find it.

Pip install django==3.2.3

Pip install channels==3.0.3

Modify settings.py, add channels and chat to INSTALLED_APPS, and add the appropriate configuration, as shown below:

INSTALLED_APPS = ['django.contrib.admin',' django.contrib.auth', 'django.contrib.contenttypes',' django.contrib.sessions', 'django.contrib.messages',' django.contrib.staticfiles', 'channels', # channels App' chat' ] # set ASGI application ASGI_APPLICATION = 'myproject.asgi.application' # set the communication background of the channel layer-local test CHANNEL_LAYERS = {"default": {"BACKEND": "channels.layers.InMemoryChannelLayer"}}

Note: in order to simplify the code, this example uses InMemoryChannelLayer as the communication background of the channel layer (channel_layer). In the actual production environment, redis should be used as the background. At this point you also need to install redis and channels_redis, and then add the following configuration:

# use redis as background in production environment Install channels_redis CHANNEL_LAYERS = {"default": {"BACKEND": "channels_redis.core.RedisChannelLayer", "CONFIG": {"hosts": [("127.0.0.1", 6379)], # or "hosts": [os.environ.get ('REDIS_URL',' redis://127.0.0.1:6379/1')],} },}

Finally, the urls.py of the chat application is added to the project urls.py, which is no different from the regular Django project.

# myproject/urls.py from django.conf.urls import include from django.urls import path from django.contrib import admin urlpatterns = [path ('chat/', include (' chat.urls')), path ('admin/', admin.site.urls),] the second step is to write a chat room page

We need to use the django normal view function to write two pages, one to display the home page (index), let the user enter the name of the chat room (room_name) through the form, and then jump to the corresponding chat room page; one page is used to display chat messages in real time and allow users to send messages.

The routing and view functions corresponding to these two pages are as follows:

# chat/urls.py from django.urls import path from. Import views urlpatterns = [path (', views.index, name='index'), path ('/', views.room, name='room'),] # chat/views.py from django.shortcuts import render def index (request): return render (request, 'chat/index.html', {}) def room (request, room_name): return render (request,' chat/room.html', {'room_name': room_name})

Next, we write two template files, index.html and room.html. Their path locations are as follows:

Chat/ _ _ init__.py templates/ chat/ index.html room.html urls.py views.py

The index.html content is shown below. It also basically does not involve websocket, that is, let the user enter the chat room to jump.

Chat Rooms, please enter the chat room name: 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 ='/ chat/' + roomName +'/';}

The room.html content is shown below. To help you understand how the front and back end implements websocket real-time communication, I have added comments to each line of js code, which is very important for you to understand how the front end sends websocket requests if you deal with websocket messages sent from the back end.

/ / get the room name const roomName = JSON.parse (document.getElementById ('room-name') .textContent); / / establish a persistent connection according to the roomName splicing websocket request address / / request url address is / ws/chat// const wss_protocol = _ (window.location.protocol = =' https:')? 'wss://':' ws://'; const chatSocket = new WebSocket (wss_protocol + _ window.location.host +'/ ws/chat/' + roomName +'/') / / trigger this method when establishing a websocket connection and display the welcome prompt chatSocket.onopen = function (e) {document.querySelector ('# chat-log'). Value + = ('[announcement] Welcome to the'+ roomName + 'discussion group. Please speak!')} / / trigger this method when receiving data from the background / / after receiving the background data, parse it and add it to the chat log chat-log chatSocket.onmessage = function (e) {const data = JSON.parse (e.data); document.querySelector ('# chat-log'). Value + = (data.message +') }; / / trigger this method when the websocket connection is disconnected 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 ();}; / / whenever you click the send message button, send a message to the background through the send method of websocket. Document.querySelector ('# chat-message-submit'). Onclick = function (e) {const messageInputDom = document.querySelector ('# chat-message-input'); const message = messageInputDom.value; / / Note here: first convert the text data to json format, and then call the send method to send it. ChatSocket.send (JSON.stringify ({'message': message})); messageInputDom.value =';}

At this point, if you start the test server with the python manage.py runserver command, when you visit a room called / hello/

You can't see any chat records or send any messages here, because we haven't written any code on the back end to process the messages from the front end and return the data. You will also see the following error on the terminal, saying that Django can only handle http connections, not websocket.

So far, what we have written is a normal django application, and we have not used the channels library to handle websocket requests. Next we will officially start using channels.

The third step is to write background websocket routing and processing methods.

When Django accepts a HTTP request, it looks for the view function based on the root URLconf, and then calls the view function to process the request. Similarly, when channels accepts a WebSocket connection, it also looks for the appropriate processing method based on the root route configuration. It's just that the routing of channels is not configured in urls.py, and the processing method is not written in views.py. In channels, these two files become routing.py and consumers.py, respectively. The advantage is that you don't have to get mixed up with django's regular applications.

Routing.py:websocket routing file, which is equivalent to the urls.py of django. It triggers the method defined in the consumers.py based on the url address of the websocket request.

Consumers.py: the equivalent of django's view views.py, which handles requests and data forwarded through websocket routing.

Create a new routing.py under the chat application and add the following code. Its purpose is to transfer websocket requests sent to ws/chat// to ChatConsumer for processing.

# chat/routing.py from django.urls import re_path from. Import consumers websocket_urlpatterns = [re_path (r'ws/chat/ (Pw+) / $', consumers.ChatConsumer.as_asgi ()),]

Note: when defining websocket routes, it is recommended to use common path prefixes (such as / ws) to distinguish WebSocket connections from normal HTTP connections, as it will make it easier to deploy Channels in a production environment, such as nginx forwarding all / ws requests to channels for processing.

Similar to Django, we also need to add the websocket route of this app to the root route of the project. Edit the myproject/asgi.py and add the following code:

# myproject/asgi.py import os from channels.auth import AuthMiddlewareStack from channels.routing import ProtocolTypeRouter, URLRouter from django.core.asgi import get_asgi_application import chat.routing os.environ.setdefault ("DJANGO_SETTINGS_MODULE", "myproject.settings") application = ProtocolTypeRouter ({# http request uses this "http": get_asgi_application () # websocket request uses this "websocket": AuthMiddlewareStack (URLRouter (chat.routing.websocket_urlpatterns)),})

Here, the ProtocolTypeRouter of channels forwards the request based on the type of request protocol. AuthMiddlewareStack will populate the connected scope with a reference to the currently authenticated user, similar to Django's request object, which we'll talk about later.

Next, create a new consumers.py under the chat application and add the following code:

Import json from asgiref.sync import async_to_sync from channels.generic.websocket import WebsocketConsumer import datetime class ChatConsumer (WebsocketConsumer): # websocket execute method def connect (self) when establishing a connection: # get the chat room name from url Set up a channel group for each room self.room_name = self.scope ['url_route'] [' kwargs'] ['room_name'] self.room_group_name =' chat_%s'% self.room_name # to add the current channel to the channel group async_to_sync (self.channel_layer.group_add) (self.room_group_name Self.channel_name) # accept all websocket requests self.accept () # execute method def disconnect (self, close_code): async_to_sync (self.channel_layer.group_discard) (self.room_group_name) when websocket is disconnected Self.channel_name) # execute the function def receive (self, text_data) when receiving a message from websocket: text_data_json = json.loads (text_data) message = text_data_json ['message'] # send the message to the channel group The channel group calls the chat_message method async_to_sync (self.channel_layer.group_send) (self.room_group_name, {'type':' chat_message', 'message': message}) # executes the method def chat_message (self) after receiving a message from the channel group Event): message = event ['message'] datetime_str = datetime.datetime.now (). Strftime ('% Y-%m-%d% Hevent% MVR% S') # send a message to the client self.send via websocket (text_data=json.dumps ({'message': f' {datetime_str}: {message}'}))

Each custom Consumer class generally inherits a synchronous WebsocketConsumer class or an asynchronous AysncWebSocketConsumer class with its own self.channel_name and self.channel_layer properties. The former is a unique long-connection channel name, while the latter provides three methods: send (), group_send () and group_add (), which can send messages to a single channel or a channel group, and can also add a channel to the group.

Each channel (channel) has a name. Anyone with a channel name can send a message to the channel.

A group (group) has a name. Anyone with a group name can add / remove channels to the group by name and send messages to all channels in the group.

Note: although asynchronous Consumer classes perform better, channels recommends using synchronous consumer classes, especially when calling Django ORM or other synchronous programs, to keep the entire consumer in a single thread and prevent ORM queries from blocking the entire event. You need to convert it with async_to_sync when calling the methods provided by channel_layer.

In addition, we use self.scope ['url_route'] [' kwargs'] ['room_name'] to get the room name of the chat room from the route. In the channels program, scope is a very important object, similar to django's request object, which represents all the information about the current websocket connection. You can get the current user object through scope ['user'] and the current request path through scope [' path'].

The fourth step depends on the effect.

Run the following command continuously, and you can see our effect at the beginning of the article.

Python manage.py makemigrations

Python manage.py migrate

Python manage.py runserver

After reading this, the article "how Django uses channels+websocket to build online chat rooms" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.