Linkage

.

asgi.py
application = ProtocolTypeRouter({
    'http': get_asgi_application(),
    'websocket': AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    )
})

routing.py
websocket_urlpatterns = [
    re_path(r'ws/socket-server/', consumers.ChatConsumer.as_asgi())
]

Consumers.py

.

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


class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.room_group_name = 'test'
        
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )
        
        self.accept()

        # self.send(text_data=json.dumps({
        #     'type': 'connection_established',
        #     'message': 'You are now connected!'
        # }))

    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )
        
        # print('Message:', message)
        
        # self.send(text_data=json.dumps({
        #     'type': 'chat',
        #     'message': message
        # }))
        
    def chat_message(self, event):
        message = event['message']
        
        self.send(text_data=json.dumps({
            'type': 'chat',
            'message': message
        }))

Simple Frontend

.

<form id="form">
        <input type="text" name="message"/>
</form>

    <div id="messages"></div>
    <script type="text/javascript">
        let url = `ws://${window.location.host}/ws/socket-server/`

        const chatSocket = new WebSocket(url)

        chatSocket.onmessage = function(e){
            let data = JSON.parse(e.data)
            console.log('Data:', data)

            if(data.type === 'chat') {
                let messages = document.getElementById('messages')
                messages.insertAdjacentHTML('beforeend', `<div>
                    <p>${data.message}</p>
                </div>`)
            }
        }

        let form = document.getElementById('form')
        form.addEventListener('submit', (e)=> {
            e.preventDefault()
            let message = e.target.message.value
            chatSocket.send(JSON.stringify({
                'message': message
            }))
            form.reset()
        })
    </script>