Slide 1

Slide 1 text

UnityアプリをSpring bootの WebSocketでつないでみた 2017.05.20 @JJUG CCC 2017 Spring

Slide 2

Slide 2 text

Who? Name: Masui Masanori Twitter: @masanori_msl Blog: vaguely http://mslgt.hatenablog.com/ GitHub: https://github.com/masanori840816

Slide 3

Slide 3 text

やりたいこと 複数のUnityアプリ同士を WebSocketで連携してリモート操作する

Slide 4

Slide 4 text

Demo

Slide 5

Slide 5 text

What's WebSocket? Client側とServer側で双方向通信する仕組み 1.Client側からリクエスト送信 2.Server側がレスポンスを返す 3.Client側がレスポンスを受けて接続確立 4.接続を閉じるまでメッセージのやりとりを行う

Slide 6

Slide 6 text

Spring bootでWebSocketを使う Using WebSocket to build an interactive web application – Spring https://spring.io/guides/gs/messaging-stomp- websocket/ このサンプルではSTOMP over WebSocketを 使って通信している

Slide 7

Slide 7 text

What's STOMP? ● Simple (or Streaming) Text Orientated Messaging Protocolの略 ● 接続確立時にメッセージの宛先をSubscribeし、 Client側やServer側からメッセージを送信すると、 Subscriberはそのメッセージを受け取る

Slide 8

Slide 8 text

C#で STOMP over WebSocketを 扱う方法がわからない …orz C#でSTOMP over WebSocket?

Slide 9

Slide 9 text

C#でSTOMP over WebSocket? C#でSTOMPを扱うライブラリは (Apache.NMS.STOMPなど)存在するが、 最終更新日が2013年だったりドキュメントが 少なかったりと厳しい(´・ω・`)

Slide 10

Slide 10 text

仕事を投げ出す男性のイラスト 画像引用元:いらすとや - http://www.irasutoya.com/2015/10/blog-post_205.html

Slide 11

Slide 11 text

STOMPを使わずに通信する(C#) WebSocket-sharpを使う https://github.com/sta/websocket-sharp Unityだけでなく C#でWebSocketを扱うことができるライブラリ

Slide 12

Slide 12 text

STOMPを使わずに通信する(C#) using UnityEngine; using WebSocketSharp; [Serializable] public class ObjectStatus { public float PositionX; public float PositionY; public float PositionZ; } public class WebSocketCtrl : MonoBehaviour { private WebSocket wsocket; private ObjectStatus objectStatus; private bool connected;

Slide 13

Slide 13 text

private void Start() { objectStatus = new ObjectStatus(); wsocket = new WebSocket("ws://localhost:8080/ws"); // イベント追加. wsocket.OnOpen += (sender, e) => connected = true; // 接続確立時. wsocket.OnClose += (sender, e) => connected = false; // 切断時. wsocket.OnMessage += (sender, e) => // メッセージ受信時. { // メッセージ受信時の処理.受け取った値を変換. var status = JsonUtility.FromJson(e.Data); }; // Serverに接続. wsocket.Connect (); } private void Update() { if (Input.GetMouseButton(1))

Slide 14

Slide 14 text

{ // 右クリックでドラッグした時にメッセージを送信. objectStatus.PositionX = 1.0f; objectStatus.PositionY = 1.0f; objectStatus.PositionZ = 1.0f; if (connected) { var json = JsonUtility.ToJson(objectStatus); wsocket.Send (json); // メッセージの送信. } } } private void OnDestroy() { wsocket.Close(); // アプリを閉じる前に接続を閉じる. } }

Slide 15

Slide 15 text

STOMPを使わずに通信する(Spring boot) 準備 ● Spring Initializrでプロジェクトを作る (WebSocketにチェックを入れる)

Slide 16

Slide 16 text

STOMPを使わずに通信する(Spring boot) 最低限追加が必要なクラスは2つ ● Config class ↓をWebSocketHandlerRegistryに追加する ● Handler class 接続確立時、メッセージ受信時などのイベント を受け取る

Slide 17

Slide 17 text

Config class @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers( WebSocketHandlerRegistry registry) { // Handlerを追加してイベントを受信できるようにする. registry.addHandler(new MessageHandler(), "/ws"); } @Bean public WebSocketHandler messageHandler() { return new MessageHandler(); } }

Slide 18

Slide 18 text

Handler class public class MessageHandler extends TextWebSocketHandler { private ArrayList users; public MessageHandler(){ users = new ArrayList<>(); } @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { // 接続が確立されたら呼ばれる. if(uses.stream() .noneMatch(user -> user.getId().equals(session.getId()))){ users.add(session); } }

Slide 19

Slide 19 text

@Override public void handleTextMessage(WebSocketSession session, TextMessage message) { // メッセージを受信したら送信元以外に送る. users.stream() .filter(user -> !user.getId().equals(session.getId())) .forEach(user -> { try{ user.sendMessage(message); } catch (IOException ex){ } }); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {

Slide 20

Slide 20 text

// 接続が閉じられたらリストから外す. users.stream() .filter(user -> user.getId().equals(session.getId())) .findFirst() .ifPresent(user -> users.remove(user)); } }

Slide 21

Slide 21 text

TextWebSocketHandler public class TextWebSocketHandler extends AbstractWebSocketHandler { @Override protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) { try { session.close(CloseStatus.NOT_ACCEPTABLE. withReason(“Binary messages not supported")); } catch (IOException ex) { // ignore } } }

Slide 22

Slide 22 text

● バイナリメッセージが送信されると、 そのセッションを閉じる仕様 ● 今回は文字列だけを扱っていたが、 それ以外の値が送られる場合は注意が必要 TextWebSocketHandler

Slide 23

Slide 23 text

感想 ● シンプルなコードで実現できてすごい(小並感) ● 今回のDemoのレベルでは気にならなかったが、 特に高パフォーマンスが要求されるVRでは コストを抑えるための工夫が必要かも?

Slide 24

Slide 24 text

Spring Framework Spring徹底入門 (http://www.shoeisha.co.jp/book/detail/9784798142470) WebSocket 26. WebSocket Support - Spring (https://docs.spring.io/spring/docs/current/spring- framework-reference/html/websocket.html) Windows 8 のネットワーク接続 - Windows 8 と WebSocket プロトコル - MSDN (https://msdn.microsoft.com/ja-jp/magazine/jj863133.aspx) WebSocketについて調べてみた。 - Nao Minami’s Blog (http://south37.hatenablog.com/entry/2014/09/07/WebSocketについて調べてみた。) websocket-sharp - sta - GitHub (https://github.com/sta/websocket-sharp) STOMP STOMP (https://stomp.github.io/stomp-specification-1.2.html) 参考

Slide 25

Slide 25 text

STOMP Over WebSocket (http://jmesnil.net/stomp-websocket/doc/) Using WebSocket to build an interactive web application - Spring (https://spring.io/guides/gs/messaging-stomp-websocket/) Spring 4.3 WebSocket関連の主な変更点(+簡易アプリ作成!!) - Qiita (http://qiita.com/kazuki43zoo/items/f2eac11f94e2afc7c964) 6. STOMPを使ってみる — Spring Bootキャンプ ハンズオン資料 1.0.0-SNAPSHOT ドキュメン ト (http://spring-boot-camp.readthedocs.io/ja/latest/06-STOMP.html) Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう! - SlideShare (https://www.slideshare.net/javawomen/spring-bootweb-62247552) Unity JSON 形式にシリアライズ - Unity - マニュアル (https://docs.unity3d.com/ja/540/Manual/JSONSerialization.html) 参考

Slide 26

Slide 26 text

Thank you!