✨ replace http module with abc module and etc

README.md

@@ -12,9 +12,9 @@ You need to have [Deno installed](https://deno.land/#installation) in order to r
 1. Clone the repository
 2. Go to the project root using terminal
 3. Run `deno run --allow-net --allow-read server.js`
-4. Open http://localhost:3000/chat.html` in browser
+4. Open http://localhost:3000` in browser
 5. That's all.
-
+6. Optional - `ngrok http http://localhost:3000` to create tunnel to expose the chat app publicly (ask people to join and start chatting)
 
 > The project was created along with Youtube Video ["Build Realtime Chat App with Deno and WebSockets"](https://youtu.be/XWyUtYL6ynE). 
-> I appreaciate if you like the video and share it.
+> I appreaciate if you like the video and share it.

chat.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import { isWebSocketCloseEvent } from "https://deno.land/std@0.58.0/ws/mod.ts";
-import { v4 } from "https://deno.land/std@0.58.0/uuid/mod.ts";
+import { isWebSocketCloseEvent } from "https://deno.land/std@0.63.0/ws/mod.ts";
+import { v4 } from "https://deno.land/std@0.63.0/uuid/mod.ts";
 
 /**
  * userId: {

public/chat.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DenoChat</title>
 
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
   <link rel="stylesheet" href="app.css">
 </head>
 

public/client.js

@@ -9,7 +9,7 @@ let leaveGroupBtn = document.querySelector("#leaveGroupBtn");
 let groupName = document.querySelector("#groupName");
 
 window.addEventListener("DOMContentLoaded", () => {
-  ws = new WebSocket(`ws://localhost:3000/ws`);
+  ws = new WebSocket(`${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/ws`);
   ws.addEventListener("open", onConnectionOpen);
   ws.addEventListener("message", onMessageReceived);
 });
@@ -28,14 +28,14 @@ sendMessageForm.onsubmit = (ev) => {
 };
 
 leaveGroupBtn.onclick = () => {
-  window.location.href = 'chat.html';
+  window.location.href = '/';
 }
 
 function onConnectionOpen() {
   console.log(`Connection Opened`);
   const queryParams = getQueryParams();
   if (!queryParams.name || !queryParams.group) {
-    window.location.href = "chat.html";
+    window.location.href = "/";
     return;
   }
   groupName.innerHTML = queryParams.group;

public/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Chat app with Deno</title>
 
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
   <link rel="stylesheet" href="app.css">

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

server.js

@@ -1,17 +1,30 @@
-import { listenAndServe } from "https://deno.land/std@0.58.0/http/server.ts";
-import { acceptWebSocket, acceptable } from "https://deno.land/std@0.58.0/ws/mod.ts";
+import { acceptWebSocket, acceptable } from "https://deno.land/std@0.63.0/ws/mod.ts";
+import { Application } from 'https://deno.land/x/abc@v1/mod.ts'
 import chat from "./chat.js";
 
-listenAndServe({ port: 3000 }, async (req) => {
-  if (req.method === "GET" && req.url === "/ws") {
-    if (acceptable(req)) {
-      acceptWebSocket({
-        conn: req.conn,
-        bufReader: req.r,
-        bufWriter: req.w,
-        headers: req.headers,
-      }).then(chat);
+const app = new Application()
+
+const websocket = async (c) => {
+  if (acceptable(c.request)) {
+    if (c.request.method === "GET" && c.request.url === "/ws") {
+      const { conn, headers, r: bufReader, w: bufWriter } = c.request;
+
+      const ws = await acceptWebSocket({
+        conn,
+        headers,
+        bufReader,
+        bufWriter,
+      });
+
+      await chat(ws);
     }
   }
-});
+};
+
+app
+  .get('/ws', websocket)
+  .static('/', 'public')
+  .file('/', 'public/chat.html')
+  .start({ port: 3000 })
+
 console.log("Server started on port 3000");