Scribd
Upload
7 views4 pages

React

The document outlines the flow of a React application starting from index.js and highlights the use of Axios for HTTP requests. It explains the functionality of WebSockets for real-time communication between a React client and a Django server, detailing the steps to implement WebSockets using Django Channels. Key steps include updating Django settings, creating an ASGI application, defining WebSocket routing, and using the WebSocket API in React.

Uploaded by

Maryam Rafique
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views4 pages

React

The document outlines the flow of a React application starting from index.js and highlights the use of Axios for HTTP requests. It explains the functionality of WebSockets for real-time communication between a React client and a Django server, detailing the steps to implement WebSockets using Django Channels. Key steps include updating Django settings, creating an ASGI application, defining WebSocket routing, and using the WebSocket API in React.

Uploaded by

Maryam Rafique
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

React

1- The flow starts from index.js that contains the element with Id
‘root’ .
2- Axios allows you to send HTTP requests like GET, POST, PUT,
DELETE, etc. and handles the responses in a cleaner way than
using raw fetch or older methods like XMLHttpRequest.
(automatic JSON handling, and simpler syntax for handling
requests and responses.)
3- The spread operator (...) copies all properties of the existing
formData object into the new object.

WEBSOCKETS :
WebSockets provide a persistent, full-duplex communication channel
between a client (React) and a server (Django). Unlike traditional HTTP
requests, which require continuous polling, WebSockets allow real-time
communication with minimal latency.
The initial HTTP handshake is used to establish the WebSocket
connection. The client sends an HTTP request to the server, specifying
the WebSocket protocol in the Upgrade header. The server responds with
an HTTP response that includes an Upgrade header indicating that it is
switching to the WebSocket protocol.
1- Django uses Django Channels to implement WebSockets.
“pip install channels channels-redis”
2- Update Django Settings (settings.py)

3- Create an ASGI Application (asgi.py)

4- Define WebSocket Routing (app/urls.py)


“path("ws/chat/<str:room_name>/", ChatConsumer.as_asgi()),”
5- Create a WebSocket Consumer (app/consumers.py)
6- Using WebSockets in React
In React, you use the WebSocket API or libraries like socket.io-client for real-time
communication.

1. Connect to WebSocket Server


Reference: https://esketchers.com/django-websockets-a-complete-
beginners-guide/

You might also like