🌸 「なでしこ」
>
🍯 「貯蔵庫」
🍯 なでしこ3貯蔵庫
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
ログイン
していません。
[
📌文法
] [
🎨命令一覧
]
[編集モード] WebSocketチャットクライアント(マイナビ連載より)
WebSocketでチャットを作ってみよう!
プログラム:
(→大)
(→textarea)
(→左右に配置)
# --- 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送信。 「#メッセージ」に「」をテキスト設定。 ここまで。
▶ 実 行 [F9]
クリア
一時保存
デバッグ
ブレイクポイント:
→ 再開
↓ 一行次へ
キャンバス: 幅
× 高
上書き保存
表示ページ
→直前に実行(または一時保存)した内容を復元
なでしこバージョン: v
素材のアップロード
ログイン
するとファイルをアップロードできます。