15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Mac+mamp+php+websocketでチャット通信してみる

Posted at

参考URL
PHPのみでHTML5のWebSocketを体験する方法
ここでダウンロードできるチャットサンプルを使って動作を確認。
ダウンロードファイル
http://www.sanwebe.com/downloads/50-websocket-example
[中身]
chat
├── ReadMe.md
├── index.php
└── server.php

以下の流れでいろいろ確認してみる
・MAMP環境で実行する
・チャットスクリプトがlocalマシンで動作すること確認。
・iphoneなど別のデバイスからアクセスして動作すること確認。
・ソースの中身を確認
 別記事参照:[チャット通信ソースを読み解いてみる]未公開

#MAMP環境
・DocumentRoot: /Applications/MAMP/htdocs/
・現在、MAC標準Apacheと被らないようにポートを8888に設定している
・ダウンロードスクリプト群はchatフォルダに格納
  http://localhost:8888/chat/
 でアクセスができる状態

#チャットスクリプトを自分環境に合わせる
自分マシンだけで確認するのであれば、localhostのままで動きます。

1.index.php(クライアントファイル)43行目あたりにserver.php(サーバファイル)へのアクセスURLが書かれているので、自分パスにかえます。
  var wsUri = "ws://localhost:9000/chat/server.php";
コマンドラインでserver.phpを実行させます。

$ php -q server.php

2.ブラウザでアクセスします。http://localhost:8888/chat/ 
  Connected!
  127.0.0.1 connected
と出てくれば成功!
スクリーンショット 2015-12-17 17.38.59.png
2つのブラウザでやりとりをしてみると、リアルタイムにそれぞれ更新されていきます。
スクリーンショット 2015-12-17 17.41.51.png

<ちょっとメモ>
URLにアクセスしたときに
スクリーンショット 2015-12-17 17.25.22.png
  Error Occurred - undefined
  Connection Closed
と出ているならば、servar.phpが実行されていないせいです。

<大きな間違いメモ>
自分の環境ではポート8888を設定していたため、ポートまで指定してIPを書かなくてはいけないのかと思っていた。
サンプルでは9000ポートを使用している。
8888ポートを使用しながら9000ポートも設定するのにはどうしたらいいのか?って考えてしまっていた。
やってしまった間違い

index.php(クライアントファイル)43行目のserverファイルへのアクセス間違い
var wsUri = "ws://localhost:8888/chat/server.php";
server.php(サーバファイル)3行目の$port設定
$post = '8888';

これでserver.phpを実行すればすでにポートは使用されているエラーになります。
$ php -q server.php
Warning: socket_bind(): unable to bind address [48]: Address already in use in /Applications/MAMP/htdocs/chat/server.php on line 13

server.phpに設定するポートは現在使用されていないポートを設定する必要があります。
8888はブラウザ表示にすでに使用しているので使えません。
使用されていないポート:9000を設定し、コマンドラインで実行すると、server.phpが口を開けて待ってる状態になります。
そこで、index.php(クライアントファイル)のはその口に飛び込むようにすればいいだけです。
  var wsUri = "ws://localhost:9000/chat/server.php";

#別のデバイスからアクセスしてみる
設定がlocalhostのままだとLOCALネットワークの状態でもアクセスできません。
自分のPCがIPなんなのかを調べます。
macはifconfigでわかります。

index.php(クライアントファイル)43行目のlocalhostを変える
var wsUri = "ws://192.168.**.**:9000/chat/server.php";
server.php(サーバファイル)2行目の$hostを変える
$host = '192.168.**.**';
$port = '9000';

ipを指定したら、自分のマシンでは
http://localhost:8888/chat/
でアクセスしても構いませんが、別デバイスではserver.phpが動作しているPCのIPでアクセスします。
http://192.168.**.**:8888/chat/
iphoneのIPが表示されて、connected ってでてきてればチャット完成!!
スクリーンショット 2015-12-17 18.13.52.png

サンプルコードを一切見ていないのでこんなにも簡単にできてしまいましたが、ソースコードを読み解いてみます!
別記事:[チャット通信ソースを読み解いてみる]未公開

15
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?