🌸 「なでしこ」
>
🍯 「貯蔵庫」
お絵かきチャット(WebSocket利用)
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
お絵かきチャット(WebSocket利用) 📖
ColabのWebSocketサーバーを動かしてお絵かきチャットを楽しもう!
プログラム:
(→大)
# --- WebSocketお絵かきチャットの使い方 --- # 使い方: # (1) Colabを開いて新規ノートブックを作る # [URL] https://colab.research.google.com/ # (2) 以下のコマンドを実行 # !curl "https://n3s.nadesi.com/plain/546.nako3" > setup.sh # !/bin/bash ./setup.sh # (3) すると、https://xxxxx.trycloudflare.com/ のようなアドレスが表示される # (4) 以下のプログラムを実行して、上記のアドレスを貼り付ける # (5) チャットで遊びたい友人にこのプログラムと上記アドレスを教えて実行する # # --- ここまで --- 「ColabなどでWebSocketサーバーを起動してアドレスを入力」と尋ねる。 サーバーURL=それ。 W=10 情報=「***」のラベル作成。 # データを受信した時 WS受信時には 黒色に塗り色設定。 情報に対象をテキスト設定。 L=対象をJSONデコード。 Lを反復 XY=対象 XYにWの円描画。 ここまで。 ここまで サーバーURLの「https://」を「wss://」に置換してWSアドレスに代入。 WSアドレスへWS接続。 # マウス操作 軌跡=[]。フラグ=オフ。 描画中キャンバスをマウス押した時には フラグ=オン。 ここまで。 描画中キャンバスをマウス離した時には フラグ=オフ。 軌跡をJSONエンコードしてWS送信。 軌跡=[] ここまで。 描画中キャンバスをマウス移動した時には もし、フラグがオフならば、戻る。 赤色に塗り色設定。 [マウスX,マウスY]にWの円描画。 軌跡に[マウスX,マウスY]を配列追加。 ここまで。
プログラムを実行
⭐ クジラ飛行机 作
(
関連URL
)
タイトル:
お絵かきチャット(WebSocket利用)
ライセンス:
N3S_ONLY (貯蔵庫のみ/転載不可/改変不可/
ハブ保存可
)
タイプ:
wnako
タグ:
-
利用バージョン:
3.2.12
作成日時:
2021/05/21 16:59 (編集: 2021/05/22 22:02)
公開の投稿
ログイン
して★を付けよう!
Twitterへ投稿
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
📍なでしこハブ (最新版の反映は1日後):
ソースの確認
編集履歴の確認
通報数:
0
通報って何?