Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Phoenix websocketとNeosVRを繋ぐ

はじめに

今回はこちらのクライアント部分をNeosVRに置き換えて
phoenix websocketをサーバーをデプロイしNeosVR内と通信をしていきます
やることとしては以下になります

Phoenix

  • phoenix project作成
  • websocketを有効化
  • joinと、イベントを1つ作成
  • デプロイ

NeosVR

  • devtool -> new object -> 3d model > box
  • box -> second -> open inspector -> add component -> network -> websocket client
  • LogixToolTip -> box inspector -> websocket client grab -> box secondary
  • websocket connect logix
  • websocket join logix
  • websocket push event logix

Phoenix

プロジェクト作成

今回DBは使わないので、 --no-ectoを付けても問題ありません

phx.new neos

Websocket

次にwebsocketを有効にします

lib/neos_web/channels/user_socket.ex
defmodule NeosWeb.UserSocket do
  use Phoenix.Socket

  ## Channels
  channel "room:*", NeosWeb.RoomChannel
...
end

次にroom:*に対応するroom_channelモジュールを作成します
中身はjoin関数と、event5イベントになります
event5は以下の2つ関数を定義しています
payloadが{"error" => true}のときにエラーメッセージを返す関数
pongというメッセージを返す関数

lib/neos_web/channels/room_channel.ex
defmodule NeosWeb.RoomChannel do
  use Phoenix.Channel
  require Logger

  def join(topic, _payload, socket) do
    Logger.info("*** topic = #{topic}")
    {:ok, socket}
  end

  def handle_in("event5", %{"error" => true}, socket) do
    {
      :reply,
      {:error,
        %{reason: "error flag for event5 request is true"}
      },
      socket
    }
  end

  def handle_in("event5", _payload, socket) do
    {:reply, {:ok, %{event: "pong"}}, socket}
  end
end

websocket部分はこれで完了なので、次はgigalixirにデプロイするための設定をしていきます

Gigalixir

以下のコマンドでappを作成してURLを取得します

gigalixir create

your.gigalixir.com の箇所を上記で作成されたappのアドレスに書き換えてください

config/prod.exs
config :neos, NeosWeb.Endpoint,
  url: [host: "your.gigalixir.com", port: 443],
  cache_static_manifest: "priv/static/cache_manifest.json"

sslを有効化しましょう

config/prod.secret.exs
config :neos, Neos.Repo,
  ssl: true, # これ
  url: database_url,
  pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10")

elixir,erlang,nodejs,npmのバージョンを指定しましょう

elixir_buildpack.config
elixir_version=1.11.3
erlang_version=23.2.5
phoenix_static_buildpack.config
node_version=12.14.0
npm_version=6.14.3

gigagixirのapp -> configurationのタブで
mix phx.gen.secret secretで生成した値を
SECRET_KEY_BASEをキーにして保存してください

これで準備が終わりましたので以下のコマンドでデプロイしましょう

git push gigalixir main 

phoenix側はこれで終了になります

NeosVR

websocket clientをつけるオブジェクト作成

これを参考に作っていきましょう
https://www.youtube.com/watch?v=q9dqSebqlW4

WebSocketClient

DevToolTipを装備してboxモデルを作成します
次にboxのインスペクターを出して add componentでWebSocketClientを追加します
clientを追加したらLogixToolTipに持ち替えて、WebSocketClientをグラブして
boxにレーザーを当てた状態でセカンダリーを押してスロットを表示させます

WebSocket Connect Logix

connectionを貼るLogixはこんな感じで、BoxのinspectorのURLに直接入れても構いません
connect.png
左側の上から2番目をWebSocketClientスロットにつなげてください
input Stringにはyour.gigalixir.appをデプロイしたアプリのアドレスに置き換えてください

ws://your.gigalixir.app/socket/websocket?token=undefined&vsn=2.0.0

WebSocket Join Logix

これでコネクションが貼れたので、次は特定のroomにjoinする処理を組んでいきます
join.png
senderとreceiverの左側をWebSocketClientのスロットにつないでください
senderのinput Stringには以下を入力してください

["3","3","room:3","phx_join",{}]

各パラメータは
0と1番目の3は調査不足のためわかりませんが、
2 ルームと番号
3 joinイベントを発火させる
4 payload トークンとかを渡せます
となっています

成功すればreceiverのoutput stringの箇所にレスポンスが書き込まれます

WebSocket Push Event Logix

次はイベントの発火になります
LogixはJoinと同じでinput stringだけが違います
push_event.png
senderとreceiverの左側をWebSocketClientのスロットにつないでください
senderのinput Stringには以下を入力してください

["3","3","room:3","event5",{}]

2 roomと番号
3 発火させるイベント
4 payload {"error" => true}と入れるとエラーメッセージが返ってくる

これでsenderのパルスを発火させると phoenixのevent5が実行されて

{:ok, {event: "pong"}}

というレスポンスがreceiveのoutput stringの箇所に書き込まれます

最後に

これでPhoenix WebsocketとNeosVRを繋ぐことができました
phoenix側でbroadcastを実行すれば同一のroomにつないでいるオブジェクトに同じメッセージを送信したり、
現在同一のroomにあるオブジェクトの一覧を取得できたりと夢が広がりますね!

本記事は以上になりますありがとうございました!

参考

https://www.youtube.com/watch?v=q9dqSebqlW4
https://qiita.com/piacerex/items/4d8b23d99434d5a841ca
https://qiita.com/sand/items/886ace4dcdff5953e673
https://qiita.com/pojiro/items/efc72557fb00b56a977a
https://qiita.com/torifukukaiou/items/d2d0e9f56ffe3bb8eda1

the_haigo
坊主の副業でフリーでプログラマーをしています 仕事はRoRがメインで趣味でReactNative(expo) Elixir Phoenix をやっています
fukuokaex
エンジニア/企業向けにElixirプロダクト開発・SI案件開発を支援する福岡のコミュニティ
https://fukuokaex.fun/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away