From 90b3690d26b359e673128d432254caea848e4366 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=B3=BD=E5=AE=87/Z=C3=A9y=C7=94=20Y=C3=A8?= Date: Wed, 12 Aug 2020 13:23:12 +1000 Subject: [PATCH 1/2] :sparkles: replace `http` module with `abc` module; :package: bump `std` package module to `0.63.0`; :wheelchair: made some improvements on frontend to be compatible with dynamic endpoints (e.g `ngrok`); --- README.md | 6 +++--- chat.js | 4 ++-- public/chat.html | 1 + public/client.js | 8 ++++---- public/favicon.ico | Bin 0 -> 15406 bytes public/index.html | 1 + public/robots.txt | 2 ++ server.js | 37 +++++++++++++++++++++++++------------ 8 files changed, 38 insertions(+), 21 deletions(-) create mode 100644 public/favicon.ico create mode 100644 public/robots.txt 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..59dacec 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; @@ -84,7 +84,7 @@ function appendMessage(message) { message.sender === "me" ? "to" : "from" }`; messageEl.innerHTML = ` - ${message.sender === "me" ? "" : `

${message.name}

`} +

${message.name}

${message.message}

`; chatMessagesCtr.appendChild(messageEl); diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..1bdb3bf3b28a4569433de682ad14a6121fe53b77 GIT binary patch literal 15406 zcmeI0Yp|A86@WhkgRG1kG)KIUlSqofSUIE7WvU-eVf81)v~;W{waFjWB$Kz3CFTuO z6hV&yD&hq*6)(i)96&B=f*0g|Q;~}oP((mL>Us2C&GPm8&iSAN{c+7a?7i1sd+oLN zUVFdap;BpAX7=$8-_6A zLp?>kqWeZz3NOKUm;~zVt0kYIV+6bf@4&y|4hSK#N)rqRZL`>(299yg_lo)$$}B@@ zyav-D`xrsnc^$tImcw=^j~|6@4XlHaptz=O@H#kNqMhSMT^R@Ze-ZTWSoh^k*j(@` zr9RXRfGp3`u+ROO3yyW4UDIlq3@5?S@O`)#dVhobS=*vBDtTF=o6vlODM02HyeSr#28?ugaNlCwR|1KhI07tFuoVZQDwE z;plEK_uTW$5ZdR%U%`7|zS*zsJ>b}#mAx4_3|yaQ6>n#r|GVhR@+B1g;bm~FKJ>LC zaumjk!MR=o?_;#{{3oKXB?r@?t#`+<`m9He!)P7EJl-pF+&u_glqaF9C5O|Yoo|w* z?})xz5@XDBJI?zV^SKvMw>%YU$ye#n#&;ve7(=an@Qh-QSEn%xQ+;x(>+>|ICEue% z8{ejw-*O35%ZH)KZb7Q&vCZi7IrO7lOMXg+W4)K*qq(S?lUckc=4#m0ntweuc|U%f zos{Zl7yevt_`ScVJ6CTA@qTNw5$u~^v}0T@^Lc&?yIOJy9eJGf`wE?V==-2_fp}ZI zXWPMVRUX@v+J4KT&%0hrZlWXXqV#)g{ZVjE-$~!g=+AqbV~9JXU3`b$rQRND$-{Jn z-*V|Yt?ri)b=z}c8F&VhK%Mz>DVzbPz_~CIUIqJV+a23 zaK3g>P1JuIs?EPA`ppo2%jNAwpX=R_>^z?*iuQGsJ1fUBusmmO-%<2?hVFIlYcARi zlshX|FfjY{tnxf@=H`0nz1wfV1Xv87!_G)&2E7R}zjMUzq-P3!oXz^*7vhm<6#f+Ifxeih(hQ3qi;NQ=Zm(b`y0}WiuZ6f__u}Mn2`|nP1ODEV}IyoQg@$> zEp(P~#^zn<&8>V!&gGn0hSAXe0dOwg-x%+A(_FY2JO}UbL@-x}fOgLp<>I0=?;Nup z+)wM_&$-I7Hwwot1>*}_%h5&KaydK-`Zu2jfi^c3W&B3eW)+xwV&2wzl5yUeH$JTje*vSmr^TyKD4L&IR)% z-c+ieNNYRL1B2dh2DH)tli=xN(jHA0=nf}?xjP-!fOpupLaeK^Pn&+=7{}^kcS|QG z>;nzpH*76Ljz{VJG#4d*W1`2r68|3B;hGp`0?jCjhWd+obuDjWgF!|CAu z&jHWHG5XM#KJ~pTWDlHng#qv$IIs8HyeP*V?PmJ+gIaPZ9T&iC@EhQI^z9tZ<(zFL zeQ`7u@_w(N{WL_p<oW8i&w2K3<^&gGo{t8~CYe|Q5Tz8Tcrdw<_Pne@>g zrSHD`SdZ+5Q6o6^-J*0(=Qf6&5q(|=-oJ>+@{XeYCgrA5U$*o2<3Ui5d={fS!SR!d z(z;+l=!zmsxI)^D$(E8Ey!00%=oVh)V~$Biq>@M#RLVMorvb1UzA_>29I z_EK#9EgbDA7oj@@>XCggdITK%SW$)_OJgyn*2FvC7tB4!Z3TbRWncd0&u#C)YbBli zi{TKcNA|<0865X$QRX?U8`Fu<(z|p3{oef;`wI1!Qd@mFr<&1Ki+>^ddh^G5<1MSU z|K_4|8(T|n!e#VtD{QqlhH|{IwkVsiG5+n~d4+x+^?L8G>zrSV{b%x_ulM2dLT7A# zAF9cbDE)rK{Fbh}T5e|>W8VzsnK>VQ&r)w`uju}-97@fi&cB!X(DpY-*srASIz7|Y z_CLm~z;+2l+dT01Wj%5XM(%TrEtkJ9`nFJ-PsaL9P};*Kkn{d2+WIgbVqdaPbHg=e z-E*|_9*m~_IjBeaVw8QA>sJ^3&6LhztPNo7?os*9Jb_Lho51y!{XLBC<&wUcc0Q|t zwD*L1-LEPeRH^LC`PMJe~GdzcNFdV)H9ib(0 zZ1``f^c(HGVbhQL;M7*{-2Sd~eXiBB^Q>Htd3F}KZga0Jd!gtFKZ8NwJ@HQWf|ew| zTM=8e@-du5ZrgtYOoMFeo%Jm?r)Gk8#Wh?H^}dIgez50VDSJRC6*XjU^jjgvP^&%; zyD7=mvsj(lj&sjEd-XFx-BLINc7>dP(^~PC_2xlyvX5_Pwli*Xd^W_n&Z6E9c7+VZ zX`a8O`b2EKn_;t=dbRh_e%~tBXMGNQ3ffu@#Nh&ncyjqTdhcA;HPN1sbiOS)e(P_8 zIq$n-UV0Z+!m-en;_u+Iz`K=WG$z}_!8h4@tkK`<`CFx}XAt8zP@f7L;i^J^9i{8A z^nEGIK`2g#&gG6)+6T~|-x6bRp2&|z>Jk61soU?}^$th8#%{hx+xOlzdJY2${p&@k zuiwDY;JeiYl%Ip+eqdt<#P`g2V{S{|?28NCEtC=eFAAOO^$m?N=68NS{Xf1Ya9vkG z*x6nL=Hqzy7nr-sKJXLhV51KCG&bemlQEBb8SxLJ9`T<_T^rv;3H#~P2dB2RU#=34D88 zTiCg-yTScew;lYxO@tr8r=TVAY)*iNX1^3B!>IgUnT-#-!&st;ka{*ZToA%P8KA1A%|9hd!bFM{a z?A}B3!M-N&zMco$U<){}zt=`V9^X>kF}{l}#hk}S{NBfi)%(2xvR$qlv$3~_1~6Xl zsdJtK=Ey^^5|+cAkjFch>&m*Q`~I45@pgqim!7%%qb}liZevh)EtJ0vG2U1kz}S^O zV2<1G_;bNr9|`7>_xV1E@s>^Sa7h>aegn-X*BH8Tc@=%J{)j)@45Z(E$hxQ-t1*Xk zqA~{Tcg`zeJ=_ZJVH4!G?&%UjDKJnh= zK6O2znz$$CmiFfT&EOfXg0+zSoKM^RnFihs&tNf_vuj`oxOR1}#j)PU$Z6Lc@5?1c zzdmBm|3-aFp^tfuZ2;7gu5?TV?aljpA=VQKlA(##qxUu|5!{ z6?*T1wq=`WJEwE+=)N=LWAZ~Z=0NPD`|lcJu5!7EzH0G%PiM3+PCw4!8TEy>l09&A z0Q?2KljelEQI0#>#y_}9|K;eOtfG%`o`?6gD>&z_kgwqMUNCp#JYxPRm(k~26YVHR zqjPQ1w$z6?KL&cj?vRd5@(pN!3E-VA$K-v;x^jIj{o|nl`ambx-O`>3yTIXa8VrRQ eum&Q(EX_G})4_Xj3Umj@>f;mnWC#8)JMbU(=@ak( literal 0 HcmV?d00001 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"); From 07c527545a5c103277621ad7026ef526189e502f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=B3=BD=E5=AE=87/Z=C3=A9y=C7=94=20Y=C3=A8?= Date: Wed, 12 Aug 2020 13:27:51 +1000 Subject: [PATCH 2/2] :pencil2: sender name --- public/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/client.js b/public/client.js index 59dacec..41e1fa7 100644 --- a/public/client.js +++ b/public/client.js @@ -84,7 +84,7 @@ function appendMessage(message) { message.sender === "me" ? "to" : "from" }`; messageEl.innerHTML = ` -

${message.name}

+ ${message.sender === "me" ? "" : `

${message.name}

`}

${message.message}

`; chatMessagesCtr.appendChild(messageEl);