Merge pull request #138 from UNLV-CS472-672/chat-feature

 PR 4: Add WebSocket-Based Real-Time Chat Using Django Channels

Author: ashley-arellano

backend/.coveragerc

@@ -12,7 +12,6 @@ source =
     apps/search
 
 omit =
-    */tests/*
     */migrations/*
     */__init__.py
     */settings.py

backend/apps/chat/consumers.py

@@ -1,13 +1,67 @@
 # The below code is just for testing purposes (it works!)
 # Tested it using https://websocketking.com/
 # and entered ws://localhost:8000/ws/apps/chat/practice/
-from channels.generic.websocket import AsyncJsonWebsocketConsumer
+import json
+from channels.generic.websocket import AsyncWebsocketConsumer
+from asgiref.sync import sync_to_async
+from .models import Message, Chat
+from django.contrib.auth.models import User
 
-class PracticeConsumer(AsyncJsonWebsocketConsumer):
-      async def connect(self):
-           await self.accept()
+# https://medium.com/@farad.dev/how-to-build-a-real-time-chat-app-using-django-channels-2ba2621ea972
+class ChatConsumer(AsyncWebsocketConsumer):
 
-      async def receive(self, text_data=None, bytes_data=None, **kwargs):
-            if text_data == 'PING':
-                # Send back a response
-                await self.send(text_data='{"message": "PONG"}')
+    async def connect(self):
+        user_id = self.scope.get('user_id')
+        if user_id is not None:
+            self.user_id = user_id
+            self.room_name = self.scope["url_route"]["kwargs"]["room_name"]  # Extracts the room_name from the URL
+            self.room_group_name = f'chat_{self.room_name}'
+
+            await self.channel_layer.group_add(  # Adds the WebSocket connection (client) to a channel group
+                self.room_group_name,
+                self.channel_name
+            )
+            await self.accept("chat") # Returns protocol back to browser (DO NOT DELETE)
+
+
+    async def disconnect(self, close_code):
+        print(f"Disconnected! Code: {close_code}")
+        await self.channel_layer.group_discard(
+            self.room_group_name,
+            self.channel_name
+        )
+
+# This function receive messages from WebSocket.
+    async def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message = text_data_json['message']
+
+        # Create a new message object
+        username = await self.save_message(self.user_id, self.room_name, message)
+
+        await self.channel_layer.group_send( # sends message to all users in a channel group
+            self.room_group_name,
+            {
+                'type': 'chat_message', # Calls chat_message()
+                'message': message,
+                'username': username
+            }
+        )
+
+    async def chat_message(self, event):
+        await self.send(text_data=json.dumps({
+            'message': 'successful',
+            'body': event['message'],
+            'username': event['username']
+        }))
+
+    @sync_to_async
+    def save_message(self, id, room_name, content):
+        try:
+            user = User.objects.get(id=id)
+            chat = Chat.objects.get(name = room_name)
+            Message.objects.create(content=content, chat = chat, sender = user) # Creates and saves message
+            return user.username
+        except (Chat.DoesNotExist):
+            print(f"Chat room '{room_name}' not found. Message not saved.")
+            return "Unknown"

backend/apps/chat/jwt_middleware.py

@@ -0,0 +1,40 @@
+# https://medium.com/@josephmiracle119/authentication-in-websocket-with-django-and-django-rest-framework-drf-50406ef95f3c
+from channels.middleware import BaseMiddleware
+from rest_framework_simplejwt.tokens import AccessToken
+from channels.db import database_sync_to_async
+
+class JWTAuthMiddleware(BaseMiddleware):
+    async def __call__(self, scope, receive, send):
+        # Get the token from the subprotocols
+        token = self.get_token_from_subprotocol(scope)
+
+        if token:
+            user_id = await self.get_user_from_token(token)
+            if user_id:
+                # Attach the user_id to the scope if the token is valid
+                scope['user_id'] = user_id
+            else:
+                scope['error'] = 'Invalid token'
+        else:
+            scope['error'] = 'Provide an auth token'
+
+        return await super().__call__(scope, receive, send)
+
+    def get_token_from_subprotocol(self, scope):
+        # Extract token from subprotocols sent during the WebSocket handshake.
+        # WebSocket subprotocols are sent as a list of protocols during the handshake.
+
+        subprotocols = scope.get("subprotocols", [])
+        if subprotocols:
+            # Assuming the token is the second protocol (after the real protocol)
+            return subprotocols[1]  # The access token is the second subprotocol
+        return None
+
+    @database_sync_to_async
+    def get_user_from_token(self, token):
+        # Validate and get the user from the provided JWT token
+        try:
+            access_token = AccessToken(token)
+            return access_token['user_id']
+        except:
+            return None

backend/apps/chat/migrations/0006_chat_name.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.6 on 2025-04-02 02:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('chat', '0005_alter_message_chat'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='chat',
+            name='name',
+            field=models.CharField(default='Unknown', max_length=100),
+        ),
+    ]

backend/apps/chat/models.py

@@ -8,6 +8,7 @@ class Chat(models.Model):
   user2 = models.ForeignKey(User, on_delete=models.CASCADE, related_name="chats_received")
   createdAt = models.DateTimeField(auto_now_add=True)
   updatedAt = models.DateTimeField(auto_now=True)
+  name = models.CharField(max_length=100, default="Unknown")
 
   objects = ChatManager()
 

backend/apps/chat/routing.py

@@ -2,5 +2,5 @@
 from . import consumers
 
 websocket_urlpatterns = [
-    re_path(r'ws/apps/chat/practice/$', consumers.PracticeConsumer.as_asgi()),
+    re_path(r"ws/apps/chat/(?P<room_name>[\w-]+)/$", consumers.ChatConsumer.as_asgi()),
 ]

backend/backend/asgi.py

@@ -9,7 +9,7 @@
 import os
 from channels.routing import ProtocolTypeRouter, URLRouter
 from django.core.asgi import get_asgi_application
-from channels.auth import AuthMiddlewareStack
+from apps.chat.jwt_middleware import JWTAuthMiddleware
 from apps.chat.routing import websocket_urlpatterns as chat_websocket_urlpatterns
 from apps.notifications.routing import websocket_urlpatterns as notification_websocket_urlpatterns
 
@@ -19,7 +19,7 @@
 
 application = ProtocolTypeRouter({
     "http": get_asgi_application(),
-    "websocket": AuthMiddlewareStack(
+    "websocket": JWTAuthMiddleware(
         URLRouter(
             combined_websocket_urlpatterns  # Use the imported websocket_urlpatterns here
         )

backend/backend/settings.py

@@ -197,18 +197,19 @@
 ASGI_APPLICATION = "backend.asgi.application"
 
 CHANNEL_LAYERS = {
-    # "default": {
-    #     "BACKEND": "channels_redis.core.RedisChannelLayer",
-    #     "CONFIG": {
-    #         "hosts": [('127.0.0.1', 6379)],
-    #     },
-    # },
-
-    "default": {
-        "BACKEND": "channels.layers.InMemoryChannelLayer",
-    },
+     "default": {
+         "BACKEND": "channels_redis.core.RedisChannelLayer",
+         "CONFIG": {
+             "hosts": [('127.0.0.1', 6379)],
+         },
+     },
+
+    #"default": {
+    #    "BACKEND": "channels.layers.InMemoryChannelLayer",
+    #},
 }
 
+
 # cloudinary
 cloudinary.config(
   CLOUD_NAME = str(os.getenv('CLOUDINARY_CLOUD_NAME')),