Merge pull request #60 from jitendra-ky/56-add-web-socket-for-real-time-chat

56-add-web-socket-for-real-time-chat

Author: jitendra-ky

.github/workflows/deploy_tornado.yml

@@ -0,0 +1,46 @@
+name: Deploy Tornado WebSocket Server
+
+on:
+  push:
+    branches:
+      - 'main'
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Step 2: Set up Docker Buildx for building images
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      # Step 3: Log in to Docker Hub using credentials stored in GitHub secrets
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      # Step 4: Build and tag the Docker image
+      - name: Build and tag Docker image
+        run: |
+          docker build -f ./tools/dockerfiles/Dockerfile.tornado -t jitenky/dragonfly-tornado:latest .
+
+      # Step 5: Push the Docker image to Docker Hub
+      - name: Push Docker image to Docker Hub
+        run: |
+          docker push jitenky/dragonfly-tornado:latest
+
+      - name: Log in to Azure
+        uses: azure/login@v1
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+      - name: Restart Azure App Service
+        run: |
+          az webapp restart --name dragonfly-tornado-2 --resource-group dragonfly

requirements/development.txt

@@ -8,3 +8,4 @@ ruff==0.9.6
 selenium==4.29.0
 geckodriver-autoinstaller==0.1.0
 psycopg2-binary==2.9.10
+tornado==6.4.2

requirements/production.txt

@@ -7,3 +7,4 @@ google-auth-httplib2==0.2.0
 psycopg2==2.9.10
 gunicorn==21.2.0
 whitenoise==6.9.0
+tornado==6.4.2

static/js/home.js

@@ -1,7 +1,75 @@
 import { getCookie } from './assets.js'
 import * as app_states from './app_states.js'
 
+let ws
+
+function connectWebSocket() {
+  // Create a new WebSocket connection to the Tornado server with user ID
+  const userId = app_states.userId
+
+  // Create WebSocket connection
+  const wsHost = env_var.TORNADO_HOSTNAME
+  ws = new WebSocket(`${wsHost}/ws/chat?user_id=${userId}`)
+
+  ws.onopen = function () {
+    console.log('WebSocket connection opened')
+  }
+
+  ws.onmessage = function (event) {
+    // Handle incoming messages from the WebSocket server
+    const message = JSON.parse(event.data)
+    console.log('Received message:', message)
+    // Update the chat UI with the new message
+    if (
+      message.sender.toString() === app_states.selectedContactId.toString() &&
+      message.receiver.toString() === app_states.userId.toString()
+    ) {
+      console.log('Received message:', message)
+      app_states.messages.push(message)
+      rerender_msg_view()
+    }
+  }
+
+  ws.onclose = function () {
+    console.log('WebSocket connection closed')
+  }
+
+  ws.onerror = function (error) {
+    console.log('WebSocket error:', error)
+  }
+}
+
+function sendMessageToWebSocket(message) {
+  // Send a message to the WebSocket server
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(message))
+  } else {
+    console.log('WebSocket is not open')
+  }
+}
+
 function rerender_msg_view() {
+  // rerender the mes_view using the app_state message list
+  const msgList = app_states.messages
+  const chatBody = $('.chat-body')
+  chatBody.empty()
+  msgList.forEach((message) => {
+    const messageElement = $('<div>').addClass(
+      message.sender === app_states.userId
+        ? 'chat-message chat-message-sent'
+        : 'chat-message chat-message-received'
+    )
+    const profile = $('<div>').addClass('chat-message-profile')
+    const content = $('<div>').addClass('chat-message-content')
+    content.append($('<p>').text(message.content))
+    messageElement.append(profile, content)
+    chatBody.append(messageElement)
+  })
+  // scroll to bottom
+  $('.chat-body').scrollTop($('.chat-body')[0].scrollHeight)
+}
+
+function render_msg_view() {
   // reads the app_state and rerenders the message view
 
   // check if user is logged in
@@ -41,22 +109,7 @@ function rerender_msg_view() {
       console.log('Messages:', response)
       app_states.setMessages(response)
       // render the messages
-      const chatBody = $('.chat-body')
-      chatBody.empty()
-      response.forEach((message) => {
-        const messageElement = $('<div>').addClass(
-          message.sender === app_states.userId
-            ? 'chat-message chat-message-sent'
-            : 'chat-message chat-message-received'
-        )
-        const profile = $('<div>').addClass('chat-message-profile')
-        const content = $('<div>').addClass('chat-message-content')
-        content.append($('<p>').text(message.content))
-        messageElement.append(profile, content)
-        chatBody.append(messageElement)
-        // scroll to bottom
-        chatBody.scrollTop(chatBody[0].scrollHeight)
-      })
+      rerender_msg_view()
     },
     error: function (response) {
       console.log('Error:', response)
@@ -115,7 +168,7 @@ function onClickContact() {
   // on click of a contact, set the selectedContactId and rerender the message view
   const contactId = $(this).attr('id')
   app_states.setSelectedContactId(contactId)
-  rerender_msg_view()
+  render_msg_view()
 }
 
 function onClickSend() {
@@ -135,11 +188,16 @@ function onClickSend() {
     },
     success: function (response) {
       console.log('Message sent:', response)
+      // Create a message object and send it to the WebSocket server
+      const wsMessage = {
+        sender: app_states.userId,
+        receiver: app_states.selectedContactId,
+        content: message,
+      }
+      sendMessageToWebSocket(wsMessage)
       app_states.messages.push(response)
-      rerender_msg_view()
+      render_msg_view()
       $('#message-box').val('')
-      // scroll to bottom
-      $('.chat-body').scrollTop($('.chat-body')[0].scrollHeight)
     },
     error: function (response) {
       console.log('Error:', response)
@@ -271,6 +329,8 @@ $(function () {
 
     rerender_contacts_view()
 
+    connectWebSocket()
+
     $('#chat-msg-send-btn').on('click', onClickSend)
 
     $('#new-message-btn').click(function () {

tools/dockerfiles/Dockerfile.tornado

@@ -0,0 +1,21 @@
+# Use official Python image as a base
+FROM python:3.10
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy requirements and install dependencies
+COPY requirements/production.txt requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose port 8888 for Tornado WebSocket server
+EXPOSE 8888
+
+# Run the Tornado server
+CMD ["python", "zserver/tornado/server.py"]

zserver/tornado/__init__.py

@@ -0,0 +1 @@
+# This file is intentionally left blank to make this directory a package.

zserver/tornado/handlers.py

@@ -0,0 +1,41 @@
+import json
+
+import tornado.websocket
+
+
+class ChatWebSocketHandler(tornado.websocket.WebSocketHandler):
+    # Dictionary to keep track of user connections
+    connections = {}
+
+    def open(self) -> None:
+        """Open a new WebSocket connection."""
+        user_id = self.get_argument("user_id")
+        self.connections[user_id] = self
+        print(f"WebSocket connection opened for user {user_id}")
+
+    def on_message(self, message: str) -> None:
+        """Receive a message from the client."""
+        data = json.loads(message)
+        sender = data.get("sender")
+        receiver = data.get("receiver")
+        content = data.get("content")
+
+        # Send the message to the intended recipient
+        if receiver in self.connections:
+            self.connections[receiver].write_message(json.dumps({
+                "sender": sender,
+                "receiver": receiver,
+                "content": content,
+            }))
+
+    def on_close(self) -> None:
+        """Close the WebSocket connection."""
+        user_id = self.get_argument("user_id")
+        if user_id in self.connections:
+            del self.connections[user_id]
+        print(f"WebSocket connection closed for user {user_id}")
+
+    def check_origin(self, origin: str) -> bool:
+        """Allow connections from any origin."""
+        print(f"Origin: {origin}")
+        return True

zserver/tornado/server.py

@@ -0,0 +1,20 @@
+import tornado.ioloop
+import tornado.web
+import tornado.websocket
+from handlers import ChatWebSocketHandler
+
+
+def make_app():
+    """Create a Tornado web application with WebSocket handler."""
+    return tornado.web.Application([
+        (r"/ws/chat", ChatWebSocketHandler),  # Route for WebSocket connections
+    ])
+
+if __name__ == "__main__":
+    # Create the Tornado application
+    app = make_app()
+    # Listen on port 8888 for incoming connections
+    app.listen(8888)
+    print("Tornado server started on port 8888")
+    # Start the Tornado I/O loop to handle events
+    tornado.ioloop.IOLoop.current().start()

zserver/utils.py

@@ -7,4 +7,5 @@ def get_env_var() -> dict[str, str]:
     env_var = {}
     env_var["GOOGLE_CLIENT_ID"] = os.getenv("GOOGLE_CLIENT_ID")
     env_var["GOOGLE_REDIRECT_URI"] = os.getenv("GOOGLE_REDIRECT_URI")
+    env_var["TORNADO_HOSTNAME"] = os.getenv("TORNADO_HOSTNAME")
     return env_var