2022-05-06
オンラインjig勉強会、今回のテーマはVR、A-Frameを使ってwebアプリをかんたんにVR化して、メタバースへの一歩、WebSocketを使ったチャットの組み込みハンズオンを実施。楽しんでもらえました。


「code4fukui/chatserver: WebSocket Chat server in Deno / JavaScript」

簡単手順ですぐ試せるので、ぜひどうぞ!


ブラウザを2つ開いてリアルタイムチャットできます。IPアドレスを使ってネットワーク上でいろいろつないで遊べます。インターネット上、グローバルに接続できるともっと楽しい! <h1>Deno WebSocket chat</h1> <div id=recv></div> <input id=mes><button id=btn>send</button> <script type="module"> const address = "ws://localhost:8080/ws"; const socket = new WebSocket(address); socket.onmessage = (msg) => { const data = JSON.parse(msg.data); const div = document.createElement("div"); div.textContent = data.id + " > " + data.data; recv.appendChild(div); }; btn.onclick = () => { socket.send(mes.value); }; </script> 18行のソースコードはこんな感じ。WebSocketでつないで、メッセージが来た処理はonmessage関数内、socket.sendでサーバーに送信! (index.html src on GitHub)

DenoのURL指定で起動して、ES-Jamに貼り付けて動かしてもOKです!

deno run -A https://code4fukui.github.io/chatserver/chatserver.js

便利ですね、Deno!

オンラインjig勉強会、5/10、12、16、20、27にも開催!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS