MyLittleTranscendence · middlefitting · Feb 9, 2024 · Feb 9, 2024
diff --git a/backend/backend/asgi.py b/backend/backend/asgi.py
@@ -6,7 +6,7 @@
 from django.core.asgi import get_asgi_application
 
 from chat.middleware import JWTAuthMiddlewareStack
-from chat.routing import websocket_urlpatterns
+from backend.routing import websocket_urlpatterns
 
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "backend.settings")
 django_asgi_app = get_asgi_application()

diff --git a/backend/backend/routing.py b/backend/backend/routing.py
@@ -0,0 +1,9 @@
+from django.urls import re_path
+
+from chat.consumers import ChatConsumer as ChatConsumer
+from game.consumers import GameConsumer as GameConsumer
+
+websocket_urlpatterns = [
+    re_path(r"ws/chat/$", ChatConsumer.as_asgi()),
+    re_path(r"ws/game/$", GameConsumer.as_asgi()),
+]
diff --git a/backend/backend/settings.py b/backend/backend/settings.py
@@ -50,6 +50,7 @@
     'chat',
     'block',
     'friend',
+    'game',
 ]
 
 MIDDLEWARE = [

diff --git a/backend/backend/urls.py b/backend/backend/urls.py
@@ -42,6 +42,7 @@
     path('docs/', schema_view.with_ui('redoc', cache_timeout=0), name='schema-redoc'),
     path('swagger/', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
     path("chat/", include("chat.urls")),
+    path("game/", include("game.urls")),
 
     # user
     path('api/users/<int:pk>/profile-image/', UserProfileUpdateView.as_view(), name='userprofile-update'),
@@ -65,10 +66,10 @@
     path('api/users/<int:user_id>/friends/<int:friend_id>/', FriendDeleteView.as_view(), name='user-friend-delete'),
     path('api/friends/', FriendListView.as_view(), name='user-friend-list'),
 
-    # chat
-    path("api/socket/chat/single_message/", SingleMessage.as_view(), name="total"),
-    path("api/socket/chat/total_message/", TotalMessage.as_view(), name="total"),
-    path("api/socket/chat/login_message/", LoginMessage.as_view(), name="total"),
+    # game
+    path("api/socket/game/single_message/", SingleMessage.as_view(), name="total"),
+    path("api/socket/game/total_message/", TotalMessage.as_view(), name="total"),
+    path("api/socket/game/login_message/", LoginMessage.as_view(), name="total"),
 
 ]
 

diff --git a/backend/chat/routing.py b/backend/chat/routing.py
diff --git a/backend/chat/service.py b/backend/chat/service.py
diff --git a/backend/chat/templates/chat/index.html b/backend/chat/templates/chat/index.html
@@ -1,4 +1,4 @@
-<!-- chat/templates/chat/index.html -->
+<!-- game/templates/game/index.html -->
 <!DOCTYPE html>
 <html>
 <head>
@@ -21,7 +21,7 @@
         document.querySelector('#room-name-submit').onclick = function(e) {
             var roomName = document.querySelector('#room-name-input').value;
             window.location.pathname = '/chat/' + roomName + '/';
-            {#window.location.pathname = '/chat/every';#}
+            {#window.location.pathname = '/game/every';#}
         };
     </script>
 </body>

diff --git a/backend/chat/templates/chat/room.html b/backend/chat/templates/chat/room.html
@@ -1,4 +1,4 @@
-<!-- chat/templates/chat/room.html -->
+<!-- game/templates/game/room.html -->
 <!DOCTYPE html>
 <html>
 <head>
@@ -16,7 +16,7 @@
     {#const chatSocket = new WebSocket(#}
     {#    'ws://'#}
     {#    + window.location.host#}
-    {#    + '/ws/chat/'#}
+    {#    + '/ws/game/'#}
     {#    + roomName#}
     {#    + '/'#}
     {#);#}

diff --git a/backend/chat/urls.py b/backend/chat/urls.py
@@ -1,4 +1,4 @@
-# chat/urls.py
+# game/urls.py
 from django.urls import path
 
 from . import views

diff --git a/backend/chat/views.py b/backend/chat/views.py
@@ -15,7 +15,7 @@ def room(request, room_name):
 
 class TotalMessage(APIView):
     @swagger_auto_schema(
-        operation_description="ws://localhost:8000/ws/chat/ \n"
+        operation_description="ws://localhost:8000/ws/game/ \n"
                               "전체 채팅 메시지 수신",
         responses={
             200: openapi.Response('수신할 데이터', schema=openapi.Schema(
@@ -33,7 +33,7 @@ def get(self, request, *args, **kwargs):
         return Response({"message": "Success"})
 
     @swagger_auto_schema(
-        operation_description="ws://localhost:8000/ws/chat/ \n"
+        operation_description="ws://localhost:8000/ws/game/ \n"
                               "전체 채팅 메시지 전송",
         request_body=openapi.Schema(
             type=openapi.TYPE_OBJECT,
@@ -52,7 +52,7 @@ def post(self, request, *args, **kwargs):
 
 class SingleMessage(APIView):
     @swagger_auto_schema(
-        operation_description="ws://localhost:8000/ws/chat/ \n"
+        operation_description="ws://localhost:8000/ws/game/ \n"
                               "개인 채팅 메시지 수신",
         responses={
             200: openapi.Response('수신할 데이터', schema=openapi.Schema(
@@ -70,7 +70,7 @@ def get(self, request, *args, **kwargs):
         return Response({"message": "Success"})
 
     @swagger_auto_schema(
-        operation_description="ws://localhost:8000/ws/chat/ \n"
+        operation_description="ws://localhost:8000/ws/game/ \n"
                               "개인 채팅 메시지 전송",
         request_body=openapi.Schema(
             type=openapi.TYPE_OBJECT,
@@ -90,7 +90,7 @@ def post(self, request, *args, **kwargs):
 
 class LoginMessage(APIView):
     @swagger_auto_schema(
-        operation_description="ws://localhost:8000/ws/chat/ \n"
+        operation_description="ws://localhost:8000/ws/game/ \n"
                               "친구의 온라인 상태 메시지 수신.",
         responses={
             200: openapi.Response(

diff --git a/backend/game/__init__.py b/backend/game/__init__.py
diff --git a/backend/game/consumers.py b/backend/game/consumers.py
@@ -0,0 +1,35 @@
+import json
+
+import aioredis
+from channels.generic.websocket import AsyncWebsocketConsumer
+from django.contrib.auth.models import AnonymousUser
+
+from backend import settings
+from game.message_type import GameMessageType
+
+
+class GameConsumer(AsyncWebsocketConsumer):
+    REDIS_HOST, REDIS_PORT = settings.CHANNEL_LAYERS["default"]["CONFIG"]["hosts"][0]
+
+    async def redis_connection(self):
+        self.redis = await aioredis.from_url(f"redis://{self.REDIS_HOST}:{self.REDIS_PORT}", encoding="utf-8",
+                                             decode_responses=True)
+
+    async def connect(self):
+        if isinstance(self.scope['user'], AnonymousUser):
+            await self.close(code=4001)
+        else:
+            await self.channel_layer.group_add(GameMessageType.LOGIN_GROUP, self.channel_name)
+            await self.channel_layer.group_add(str(self.scope['user'].id), self.channel_name)
+            await self.accept()
+            await self.redis_connection()
+
+    async def disconnect(self, close_code):
+        await self.channel_layer.group_discard(GameMessageType.LOGIN_GROUP, self.channel_name)
+        await self.channel_layer.group_discard(str(self.scope['user'].id), self.channel_name)
+        self.redis.close()
+
+    async def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message_type = text_data_json.get('type')
+
diff --git a/backend/game/message_type.py b/backend/game/message_type.py
@@ -0,0 +1,2 @@
+class GameMessageType:
+    LOGIN_GROUP = "login_group"
diff --git a/backend/game/service.py b/backend/game/service.py
diff --git a/backend/game/templates/game/index.html b/backend/game/templates/game/index.html
@@ -0,0 +1,28 @@
+<!-- game/templates/game/index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Chat Rooms</title>
+</head>
+<body>
+    What chat room would you like to enter?<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.key === 'Enter') {  // enter, return
+                document.querySelector('#room-name-submit').click();
+            }
+        };
+
+        document.querySelector('#room-name-submit').onclick = function(e) {
+            var roomName = document.querySelector('#room-name-input').value;
+            window.location.pathname = '/game/' + roomName + '/';
+            {#window.location.pathname = '/game/every';#}
+        };
+    </script>
+</body>
+</html>
diff --git a/backend/game/templates/game/room.html b/backend/game/templates/game/room.html
@@ -0,0 +1,58 @@
+<!-- game/templates/game/room.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Game 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" }}
+<script>
+    const roomName = JSON.parse(document.getElementById('room-name').textContent);
+
+    const gameSocket = new WebSocket(
+        'ws://'
+        + window.location.host
+        + '/ws/game/'
+    );
+
+    gameSocket.onmessage = function (e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'total_message') {
+            const formattedMessage = `*${data.type}* [${data.datetime}] ${data.sender_nickname} ${data.sender_id}: ${data.message}\n`;
+            document.querySelector('#chat-log').value += formattedMessage;
+        } else if (data.type === 'single_message') {
+            const formattedMessage = `*${data.type}* [${data.datetime}] ${data.sender_nickname} ${data.sender_id}: ${data.message}\n`;
+            document.querySelector('#chat-log').value += formattedMessage;
+        } else {
+            document.querySelector('#chat-log').value += (data.message + '\n');
+        }
+    };
+
+    gameSocket.onclose = function (e) {
+        console.error('Chat socket closed unexpectedly');
+    };
+
+    document.querySelector('#chat-message-input').focus();
+    document.querySelector('#chat-message-input').onkeyup = function (e) {
+        if (e.key === 'Enter') {  // 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;
+        gameSocket.send(JSON.stringify({
+            'type': 'single_message',
+            'message': message,
+            'receiver_id': 1
+        }));
+        messageInputDom.value = '';
+    };
+</script>
+</body>
+</html>
diff --git a/backend/game/urls.py b/backend/game/urls.py
@@ -0,0 +1,10 @@
+# game/urls.py
+from django.urls import path
+
+from . import views
+
+
+urlpatterns = [
+    path("", views.index, name="index"),
+    path("<str:room_name>/", views.room, name="room"),
+]
diff --git a/backend/game/views.py b/backend/game/views.py
@@ -0,0 +1,9 @@
+from django.shortcuts import render
+
+
+def index(request):
+    return render(request, "game/index.html")
+
+
+def room(request, room_name):
+    return render(request, "game/room.html", {"room_name": room_name})
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ @@
         'chat',
         'block',
         'friend',
+        'game',
     ]
     MIDDLEWARE = [
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		class GameMessageType:
		LOGIN_GROUP = "login_group"