Implementing the WebSocket client

So far, you have created the course_chat_room view and its corresponding template for students to access the course chat room. You have implemented a WebSocket consumer for the chat server and tied it with URL routing. Now, you need to build a WebSocket client to establish a connection with the WebSocket in the course chat room template and be able to send/receive messages.

You are going to implement the WebSocket client with JavaScript to open and maintain a connection in the browser. You will use jQuery for interaction with Document Object Model (DOM) elements, since you already loaded it in the base template of the project.

Edit the chat/room.html template of the chat application and modify the domready block, as follows:

{% block domready %}
  var url = 'ws://' + window.location.host +
            '/ws/chat/room/' + '{{ course.id }}/';
  var chatSocket = new WebSocket(url);
{% endblock...