diff --git a/README.md b/README.md index 1026298..1f8af6a 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/chat.js b/chat.js index 3e26488..43bb42a 100644 --- a/chat.js +++ b/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: { diff --git a/public/chat.html b/public/chat.html index 8b04474..20f2b5d 100644 --- a/public/chat.html +++ b/public/chat.html @@ -6,6 +6,7 @@ DenoChat + diff --git a/public/client.js b/public/client.js index c984ff2..41e1fa7 100644 --- a/public/client.js +++ b/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; diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..1bdb3bf Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index a9030b9..7560f6b 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,7 @@ My Chat app with Deno + diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..77470cb --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / \ No newline at end of file diff --git a/server.js b/server.js index 43ff182..c2611b3 100644 --- a/server.js +++ b/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");