3
votes

enter image description hereshows connection reset error

path AnonymousUser

[28/Sep/2020 12:43:30] "GET /chat/aman/aman_indresh/ HTTP/1.1" 200 1920

path AnonymousUser

Not Found: /ws/chat/aman_indresh/

[28/Sep/2020 12:43:30] "GET /ws/chat/aman_indresh/ HTTP/1.1" 404 2211

Exception happened during processing of request from ('127.0.0.1', 54816) Traceback (most recent call last): File "/usr/local/Cellar/[email protected]/3.8.5/Frameworks/Python.framework/Versions/3.8/lib/python3.8/socketserver.py", line 650, in process_request_thread self.finish_request(request, client_address) File "/usr/local/Cellar/[email protected]/3.8.5/Frameworks/Python.framework/Versions/3.8/lib/python3.8/socketserver.py", line 360, in finish_request self.RequestHandlerClass(request, client_address, self) File "/usr/local/Cellar/[email protected]/3.8.5/Frameworks/Python.framework/Versions/3.8/lib/python3.8/socketserver.py", line 720, in init self.handle() File "/Users/indresh/Documents/Projects/tiktok/server/env/lib/python3.8/site-packages/django/core/servers/basehttp.py", line 174, in handle self.handle_one_request() File "/Users/indresh/Documents/Projects/tiktok/server/env/lib/python3.8/site-packages/django/core/servers/basehttp.py", line 182, in handle_one_request self.raw_requestline = self.rfile.readline(65537)

File "/usr/local/Cellar/[email protected]/3.8.5/Frameworks/Python.framework/Versions/3.8/lib/python3.8/socket.py", line 669, in readinto return self._sock.recv_into(b)

ConnectionResetError: [Errno 54] Connection reset by peer

Consumers.py

import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        # print(self.channel_layer)
        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']
        sender_name = text_data_json['sender_name']

        # Send message to room group
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message,
                'sender_name': sender_name
            }
        )

    # Receive message from room group
    def chat_message(self, event):
        message = event['message']
        sender_name = event['sender_name']

        # Send message to WebSocket
        self.send(text_data=json.dumps({
            'message': message,
            'sender_name': sender_name

        }))

routing.py

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<room_name>\w+)/$', consumers.ChatConsumer),
]

project- level routing.py

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat_socket.routing

application = ProtocolTypeRouter({
    'websocket': AuthMiddlewareStack(
        URLRouter(
            chat_socket.routing.websocket_urlpatterns
        )
    ),
})

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">
    {{ room_name|json_script:"room-name" }}
    {{ your_name|json_script:"your-name" }}
    <h2>{{your_name}}</h2>
    <script>
        const roomName = JSON.parse(document.getElementById('room-name').textContent);
        const yourName = JSON.parse(document.getElementById('your-name').textContent);

        const chatSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/chat/'
            + roomName
            + '/'
        );

        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            console.log(e);
            document.querySelector('#chat-log').value += (data.sender_name+": "+data.message + '\n');
        };

        chatSocket.onclose = function(e) {
            console.log(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) {
            const messageInputDom = document.querySelector('#chat-message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message,
                'sender_name': yourName,
            }));
            messageInputDom.value = '';
        };
    </script>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Rooms</title>
</head>
<body>
    Your Name?<br>
    <input id="your-name-input" type="text" size="100"><br>
    Your chat room name?<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;
            var yourName = document.querySelector('#your-name-input').value;
            if(yourName == null){
                yourName = Math.floor(Math.random() * 100000000);
            }
            window.location.pathname = '/chat/' + yourName + '/' + roomName + '/';
        };
    </script>
</body>
</html>
1
Enhancing the question title and description may help a lot.Ahmed Nour Eldeen
it is not able to connect with web socket server... it throws 'ConnectionResetError: [Errno 54] Connection reset by peer'Indresh Mahor

1 Answers

-5
votes

I came across the same issue ConnectionResetError: [Errno 54] Connection reset by peer.

The issue is about trying to serve static files through development server with debug settings to False, development server can serve static files only when debug is set to True in settings file.

In your settings file replace

DEBUG = False

with

DEBUG = True

Now restart your development server it should work now.