[Unity]UnityWebsocket を使ってチャット機能を実装する

株式会社プライムストラクチャーのエンジニアのSayaです。

今回は前回紹介した Unity 用の Websocket であるWebsocket-sharp を用いて Unity 上でチャット機能を実装してみたいと思います。

## 検証環境
この検証は以下の環境で行いました。

  • macOS Mojave 10.14.5
  • Unity 2019.1.6

チャット画面

以下の作成後の画面となるように実装していきます。

サーバーの設定

Unity クライアントから送られた文字を allMessage 変数に加算していきます。

[serve.js]
const WebSocket  = require('ws')

const wss = new WebSocket.Server({ port: 3000 })
let allMessage = ''

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    allMessage += message + '\n'

    wss.clients.forEach(client => {
      client.send(allMessage)
    })
  })
})

Unity の設定

Unity のヒエラルキーにゲームオブジェクトを追加

Unity のヒエラルキーに以下のゲームオブジェクトを追加していきます。
* Text
* InputField
* Button(クリックしたら SendTextMessage.cs の Send メソッドを実行) 
* SendTextMessage( SendTextMessage スクリプトを追加)
* Client( Client スクリプトを追加)

websocket

WebSocket でサーバーと Unity を繋げるために以下のスクリプトを作成します。

[client.cs]
using UnityEngine;
using System.Collections;
using WebSocketSharp;
using WebSocketSharp.Net;
using UnityEngine.UI;
using System.Threading;

public class Client : MonoBehaviour
{
    public WebSocket ws;
    GameObject text;

    void Start()
    {
        // 表示するためにTextゲームオブジェクトを取得
        this.text = GameObject.Find("Text");

        string url = "ws://localhost:3000/";

        ws = new WebSocket(url);
        var context = SynchronizationContext.Current;

        ws.OnOpen += (sender, e) =>
        {
            Debug.Log("WebSocket Open");
        };

        ws.OnMessage += (sender, e) =>
        {
            context.Post(state => {
                // 受け取ったデータを表示
                this.text.GetComponent<Text>().text = state.ToString();
            }, e.Data);
        };

        ws.OnError += (sender, e) =>
        {
            Debug.Log("WebSocket Error Message: " + e.Message);
        };

        ws.OnClose += (sender, e) =>
        {
            Debug.Log("WebSocket Close");
        };

        ws.Connect();
    }

    void OnDestroy()
    {
        ws.Close();
        ws = null;
    }
}

このスクリプトを Client ゲームオブジェクトにアタッチします。

ボタン用のメソッド

ボタンを押されたらサーバーにテキストを送る以下のスクリプトを追加します。

[SendTextMessage.cs]
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SendTextMessage : MonoBehaviour
{
    GameObject inputField;
    GameObject client;

    private void Start()
    {
        this.inputField = GameObject.Find("InputField");
        this.client = GameObject.Find("Client");
    }

    public void Send()
    {
        // 入力されたデータを取得
        string inputText = this.inputField.GetComponent<InputField>().text;
        // 入力したら、入力欄を空にする
        this.inputField.GetComponent<InputField>().text = "";
        // 入力した文字をサーバに送る
        this.client.GetComponent<Client>().ws.Send(inputText);
    }
}

このスクリプトを SendTextMessage ゲームオブジェクトにアタッチします。

実行

Websocket 用のサーバーを実行します。

確認用として Unity から PC 用としてビルドし、実行されたら Unity エディター上でも再生ボタンを押します。

これでテキストの送受信が出来るようになります。

まとめ

今回は Unity 用の Websocket である Websocket-sharp を用いて、チャット機能の実装をする方法を紹介していきました。

Websocket-sharp を用いればあらゆる双方向通信を用いた機能の実装が出来るようになります。

今回のチャット機能の他にもゲームの通信プレイ機能などを実装してみても面白いと思います。