- Websocketの概要: Websocketは、双方向通信を可能にする技術。このハンズオンでは、ローカルネットワーク上で複数人が疑似チャットできる環境を構築する。
- 目標:
- PythonでFastapiのWebsocketサーバーを立ち上げる。
- vscodeでDevcontainer開発環境を用いてnodeクライアントとしてWebsocket通信を行う。
※技術自体の詳細な説明は省略。GitやDocker、docker-composeの基本的なセットアップが済んでいることを前提とする。
- リポジトリをクローンする。
git clone https://github.com/marcosanyo/websocket_server.git
- ディレクトリに移動する。
cd websocket_server - 特定のポートを指定したい場合は、
docker-compose.yamlのポートを変更する。services: websocket: ports: - "9001:9001"
- Docker Composeでビルド＆立ち上げを行う。
docker-compose up --build
- リポジトリをクローンする。
git clone https://github.com/marcosanyo/websocket_client.git
- vscodeのホームディレクトリとして開く。
code websocket_client
- Visual Studio Codeで
ctrl+shift+PキーからRebuild Containerを実行する。- Devcontainer拡張がインストールされている前提。
-
サーバーのローカルIPアドレスを調べる。
- LinuxやWSL2の場合:
ip route | awk '/default via/ {print $3}'
- Macの場合:
ipconfig getifaddr en0
- LinuxやWSL2の場合:
-
クライアントのターミナルから以下のコマンドを実行する。
wscat -c ws://<サーバーのIPアドレス>:9001/ws
※
<サーバーのIPアドレス>には調べたIPアドレスを入力する。 -
以下のように表示されれば接続完了。
< Welcome, User1! < Server: User1 joined the chat
-
メッセージを入力しエンターを押すと、参加者全員にチャットが返る。
> こんにちは < User1: こんにちは
- 動作はMacで確認したが、LinuxやWindowsでも同様に動作するはず。
- WSL2ではWindows側にポートフォワーディングが必要な場合がある。
netshコマンドで対応可能らしい。(未確認)netsh interface portproxy add v4tov4 listenport=9001 listenaddress=0.0.0.0 connectport=9001 connectaddress=<WSL2のIPアドレス>