Node.js覚えたくない人のためのphpで始めるWebSocket

なぜphpなのか?

Node.jsとかだと環境の構築とかを新規で必要なので、

まずは環境の構築がすでにしてあるphpで試してみようかなと思った次第です。

ちなみにぼくは、Node童貞です。

今回の動作環境

php 5.5.10でテストしています。

ライブラリのインストールにComposerを使用しているのでまだの人は導入しておいてください。

おそらくphp 5.4以上なら問題なく動作するかと思います。

サンプルコードのダウンロードは下記リンクからどうぞ。

php_websocketserver

ソースコードの内容について

chat.php (Websocket Server)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
  use Ratchet\MessageComponentInterface;
  use Ratchet\ConnectionInterface;
  use Ratchet\Server\IoServer;
  use Ratchet\WebSocket\WsServer;
  use Ratchet\Http\HttpServer;

  require __DIR__.'/vendor/autoload.php';

  /**
  * chat.php
  * Send any incoming messages to all connected clients (except sender)
  */
  class Chat implements MessageComponentInterface {

      protected $clients;

      public function __construct() {
          $this->clients = new \SplObjectStorage;
      }

      public function onOpen(ConnectionInterface $conn) {
          $this->clients->attach($conn);
      }

      public function onMessage(ConnectionInterface $from, $msg) {
          foreach ($this->clients as $client) {
              if ($from != $client) {
                  $client->send($msg);
              }
          }
      }

      public function onClose(ConnectionInterface $conn) {
          $this->clients->detach($conn);
      }

      public function onError(ConnectionInterface $conn, \Exception $e) {
          $conn->close();
      }
  }

  // Run the server application through the WebSocket protocol on port 8080
  $server = IoServer::factory(new HttpServer(new WsServer(new Chat())), 9000);
  $server->run();

ご覧のとおり基本的にはWebsocketServerの受け取りとか送信する処理がざっと書いてある感じですね。

htmlのソースコード (index.html)

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
</head>
<body>
  <input type="text" id="text"/>
  <input type="button" id="button" value="Send" />
  <div id="msg-area">

  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>

        var conn = new WebSocket('ws://localhost:9000');
      var msg_area = $('#msg-area');

        conn.onopen = function(e) {
          console.log("Connection established!");
      };

        $('#button').click(function(){
            var msg = $('#text').val();
            $('#text').val("");
            //相手に送信
            conn.send(msg);
            //自分の投稿した内容をmsg_areaに追記
            msg_area.append(warpMessage(msg));
        });

        conn.onmessage = function(e) {
            //相手が投稿した内容をmsg_areaに追記
            msg_area.append(warpMessage(e.data));
        };

        function warpMessage(msg){
            return '<p>' + msg + '</p>';
        }

  </script>
</body>
</html>

まぁ、JSの書き方があれなんですが、許してください。。

こっちではwebsocketServerに送信する処理と受信する処理が書いてある感じ。 ともかく、シンプルにかけてしまいました。

使用方法

composerをカレントディレクトリにインストールしたあと、

1
  composer.phar install

でWebSocketServerで使用するライブラリをインストールしましょう。

インストールが完了したらまずはWebSocketServerを起動させましょう。

1
php chat.php

なんとなくビルトインサーバでも立ち上げておきましょう。(もはやここ最近の癖です)

スマホから試したい時とかはこのコマンドを叩いておきましょう。

1
php -S 0.0.0.0:9999

2つのブラウザでlocalhost:9999にアクセスして試してみましょう。

どうでしょうか? ちゃんとメッセージが送信されていますでしょうか?

特にデータの永続化はしていないのでリロードすればメッセージは消えてしまいますが、

送信したメッセージが相手側のブラウザにも表示されているかと思います。

今回使用したライブラリについて

しっかりドキュメントのまとまった良いライブラリだと思います。

詳しい仕様方法とかはこちらのページから。

http://socketo.me/