WebSocketチャットクライアント(マイナビ連載より) 📖

WebSocketでチャットを作ってみよう!

プログラム: (→大)
# --- WebSocketチャットの使い方 --- # 使い方: # (1) Colabを開いて新規ノートブックを作る # (2) 以下のコマンドを実行 # !curl "https://n3s.nadesi.com/plain/546.nako3" > setup.sh # !/bin/bash ./setup.sh # (3) すると、https://xxxxx.trycloudflare.com/ のようなアドレスが表示される # (4) 以下のプログラムを実行して、上記のアドレスを貼り付ける # (5) チャットで遊びたい友人にこのプログラムと上記アドレスを教えて実行する # # --- ここまで --- 「Colabで起動したWebSocketサーバーのアドレスを入力してください」と尋ねる。 「https://」を「wss://」に置換して、サーバーURLに代入。 WS受信時には 　「#logs」のテキスト取得して、Lに代入。 　　L=対象＆改行＆L。 　　「#logs」へLをテキスト設定。 ここまで。 サーバーURLへWS接続。 # チャット画面を作成 「<h1>チャットクライアント</h1> <div> 名前: <input type="text" id="名前" value="クジラ"><br> 内容: <input type="text" id="メッセージ" value="テスト。"><br> <button id="送信ボタン">送信</button><br> </div> <div><h2>会話ログ</h2> <textarea id="logs" rows="10" cols="40"></textarea> </div>」をDOM親要素へHTML設定。 「#送信ボタン」をクリックした時には 　　F名前=「#名前」のテキスト取得。 　　F内容=「#メッセージ」のテキスト取得。 　　「{今}> {F名前}: {F内容}」をWS送信。 　　「#メッセージ」に「」をテキスト設定。 ここまで。