PlayCanvas

glitchをnodeサーバーにしてPlayCanvasとwebsocketで通信してみる その1

PlayCanvasでWebSocket通信を行う

こちらの記事を見ながら、PlayCanvasでWebSocket通信をする方法を勉強しています。

Real Time Multiplayer | Learn PlayCanvas

Glitch

WebSocket通信をするためには、node.jsのサーバーを立てる必要があります。

このチュートリアルでは、glitchというサービスを使ってnode.jsのサーバーをつくります。

glitch

まずは、下記URLをクリックしてnode.jsサーバー用のプロジェクトをつくります。

新しいプロジェクトを作成

Server js  dapper thundering answer 2022 04 24 22 25 52

server.jsの中身を全削除して下記のコードに変更します。

var server = require('http').createServer();
var options = {
  cors: true
}

var io = require('socket.io')(server, options);

io.sockets.on('connection', function(socket) {
    console.log("Client has connected!");
});

console.log ('Server started.');
server.listen(3000);

次に、glitchにsocket.ioを追加します。

Package json  dapper thundering answer 2022 04 24 22 30 15

上の画像はすでに追加されているのですが、package.jsonをマウスでクリックした後、”+ADD PACKAGE”をクリック。

Package json  dapper thundering answer 2022 04 24 22 31 45

フォームに”socket.io”といれてクリックすると、

Package json  dapper thundering answer 2022 04 24 22 32 29

package.jsonにsocket.ioが追加されます。

Package json  dapper thundering answer 2022 04 24 22 34 21

すると、glitchのlogに”Server started”と表示されます。

PlayCanvas側

PlayCanvasでプロジェクトを立ち上げます。

Multi | Editor 2022 04 24 22 43 02

左下にある歯車のアイコンをクリック。

右にSETTINGSが表示されるので、この中にある”EXTERNAL SCRIPTS”をクリック。

URLs を 1
その下に socket.ioのCDN URLを入力します。

socket.io – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers

https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.min.js

今回はこちらのURLを使用。

Multi | Editor 2022 04 24 22 40 21

次はASSETSにNetwork.jsというscriptを作成します。

Multi | Code Editor 2022 04 24 22 41 30

initializeメソッドに、glitchのURLを入力します。

Package json  dapper thundering answer 2022 04 24 22 47 15

自分のglitchプロジェクトのURLは、

this.socket = io.connect('https://【ここを変更】.glitch.me');

こんな感じです。

glitchとPlayCanvasの通信確認

これで、PlayCanvasを起動。

Package json  dapper thundering answer 2022 04 24 22 51 59

glitchのlog画面で”Client has connected!”と表示されれば、glitchとPlayCanvasの通信が確認できたことになります。

まとめ

まずは、glitchとPlayCanvasの通信ができたのですが、この後のTutorialをすすめるには、Socket.IOを勉強する必要があるので、次に進む前にSocket.IOを学ぶことにします。

Socket.IO

ABOUT ME
中畑 隆拓
スマートライト㈱ 代表取締役。IoTソリューションの開発、スマートホーム&オフィスのコンサルティング、DALI,KNX,EnOceanなどのインテグレーションを行っています。

COMMENT

メールアドレスが公開されることはありません。