Go×ReactでWebsocket通信

はじめに

バックエンドはGoを、フロントはReactを使ってシンプルなチャットを作ってみました。

Go側はgorilla/websocketを参考に、ReactはSimple Go + React Websockets Quickstartを参考にしています。

Quickstart

ソースコードはforesukecom/go-react-chatで公開しています。
とりあえずローカル環境で実行してみる場合は、以下のようにソースコードを持ってきて、go runとyarn startを実行してからhttp://localhost:3000/にアクセスすればチャットを試すことが出来ます。

git clone https://github.com/foresukecom/go-react-chat.git
cd go-react-chat/backend
go run *.go &
cd ../frontend
yarn
yarn start

ハマりポイント

gorilla/websocketのサンプルコードでWebサーバを立ち上げて、Reactから接続したところ、React側にはfailed: Error during WebSocket handshake: Unexpected response code: 403、Go側にはwebsocket: request origin not allowed by Upgrader.CheckOriginというエラーが発生してしまいました。
gorilla/websocketのドキュメントにも書いてあるのですが、Cross-Originのチェックに引っかかってしまったようです。以下ブログを参考にしたら繋がるようになりました。
(今回はサンプルだからCross-Originでも受け入れちゃってますが、セキュリティ的にはよろしくないのでサービスとして使うときには、ちゃんと書く必要が出てきそうです) gorilla/websocket で異なるOrgin間の Error during WebSocket handshake: Unexpected response code: 403 を回避する

まとめ

Websocketの接続・双方向通信・切断という最低限の部分は書くことが出来ました。
実際のチャットサービスでは認証処理や再接続処理、永続化などが必要になるので、まだまだ足りないものばかりですが、とりあえずWebsocketに入門出来たので満足です。

余談

久しぶりにGithubのPublicリポジトリを作ったのですが、使用しているパッケージの一部が古かったらしく、Dependabotがパッケージを更新してPR投げてくれました。
凄い便利!