常連

[前回の投稿内容](https://teratail.com/questions/15012#r23159)で解決とまで
いかなかったため、
改めてお伺いいたしたく投稿いたしました。

原因に関しては、前回の投稿から
ApachではなくTomcatの方にあるのではと考えられます。

ローカル環境ではWebSocektは利用できるのですが、
サーバーに上げたら
WebSockeが機能しなくなってしまいました。
WebSockeとApacheの連携がうまくいっていないようです。

利用している環境は
Apache：2.4.6
Tomcat：7.0.42
CentOS：6.5
です。

http://qiita.com/sion_cojp/items/a79ae08853528761cc30
や
http://normalse.hatenablog.jp/entry/2015/03/13/200755
を参照して設定を行ったのですが、
うまくいきません。

Webアプリのトップページには
http://www.◯◯.jp/◯◯/
で表示できるとします。

/etc/httpd/conf/extra/httpd-proxy.confの設定は
```
ProxyPass /◯◯/ ws://www.◯◯.jp/◯◯/
ProxyPassReverse /◯◯/ ws://www.◯◯.jp/◯◯/
ProxyPass /◯◯/ ajp://www.◯◯.jp:8009/◯◯/
```
としています。

httpd.confにおける設定は以下の通りです。
```
ServerRoot "/usr"
Include /etc/httpd/conf/extra/httpd-proxy.conf
Listen 80
LoadModule authn_file_module /etc/httpd/modules/mod_authn_file.so
LoadModule authn_core_module /etc/httpd/modules/mod_authn_core.so
LoadModule authz_host_module /etc/httpd/modules/mod_authz_host.so
LoadModule authz_groupfile_module /etc/httpd/modules/mod_authz_groupfile.so
LoadModule authz_user_module /etc/httpd/modules/mod_authz_user.so
LoadModule authz_core_module /etc/httpd/modules/mod_authz_core.so
LoadModule access_compat_module /etc/httpd/modules/mod_access_compat.so
LoadModule auth_basic_module /etc/httpd/modules/mod_auth_basic.so
LoadModule reqtimeout_module /etc/httpd/modules/mod_reqtimeout.so
LoadModule filter_module /etc/httpd/modules/mod_filter.so
LoadModule mime_module /etc/httpd/modules/mod_mime.so
LoadModule log_config_module /etc/httpd/modules/mod_log_config.so
LoadModule env_module /etc/httpd/modules/mod_env.so
LoadModule headers_module /etc/httpd/modules/mod_headers.so
LoadModule setenvif_module /etc/httpd/modules/mod_setenvif.so
LoadModule version_module /etc/httpd/modules/mod_version.so
LoadModule proxy_module /etc/httpd/modules/mod_proxy.so
LoadModule proxy_ftp_module /etc/httpd/modules/mod_proxy_ftp.so
LoadModule proxy_http_module /etc/httpd/modules/mod_proxy_http.so
LoadModule proxy_wstunnel_module /etc/httpd/modules/mod_proxy_wstunnel.so
LoadModule proxy_ajp_module /etc/httpd/modules/mod_proxy_ajp.so
LoadModule mpm_event_module /etc/httpd/modules/mod_mpm_event.so
LoadModule unixd_module /etc/httpd/modules/mod_unixd.so
LoadModule status_module /etc/httpd/modules/mod_status.so
LoadModule autoindex_module /etc/httpd/modules/mod_autoindex.so
LoadModule dir_module /etc/httpd/modules/mod_dir.so
LoadModule alias_module /etc/httpd/modules/mod_alias.so
<IfModule unixd_module>
User apache
Group apache
</IfModule>
ServerAdmin you@example.com
<Directory />
    AllowOverride none
    Require all denied
</Directory>
DocumentRoot "/var/www/html"
<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>
<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>
<Files ".ht*">
    Require all denied
</Files>
ErrorLog "/var/log/httpd/error_log"
LogLevel warn
<IfModule log_config_module>
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common
    <IfModule logio_module>
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>
    CustomLog "/var/log/httpd/access_log" common
</IfModule>
<IfModule alias_module>
    ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
</IfModule>
<IfModule cgid_module>
</IfModule>
<Directory "/var/www/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>
<IfModule mime_module>
    TypesConfig /etc/httpd/conf/mime.types
    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz
</IfModule>
<IfModule proxy_html_module>
Include /etc/httpd/conf/extra/proxy-html.conf
</IfModule>
<IfModule ssl_module>
SSLRandomSeed startup builtin
SSLRandomSeed connect builtin
</IfModule>
```
---
【追記】
今まで、mod_proxyを利用していたと思っていたのですが、
httpdのエラーログを見たところ、
```
Apache/2.4.6 (Unix) mod_jk/1.2.37 configured -- resuming normal operations
```
との記載があり、mod_jkを利用していたようです。

そこで、mod_proxyを利用できるように、変えようと思って、
とりあえず、mod_jk関連のものを削除してApache、Tomcatを起動しました。
すると、
```
Apache/2.4.6 (Unix) configured -- resuming normal operations
```
となってしまいました。
起動には成功しているようですが、
これはmod_proxyを利用できていないようです。

また、httpd_proxy.confでの設定を全くしていない時でも、
ポート番号8080を抜いた記載でも、接続がおこなえます。
つまり、他の設定ファイルというで、
ApacheとTomcatの連携を行っているのでしょうか？

httpd.confの設定の問題かと思うのですが、
どこがおかしいのかご教授いただけると幸いです。

---
【追記】
server.xmlの設定になります。
```
<?xml version='1.0' encoding='utf-8'?>
<Server port="8005" shutdown="SHUTDOWN">
  <Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on" />
  <Listener className="org.apache.catalina.core.JasperListener" />
  <Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener" />
  <Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" />
  <Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener" />

  <GlobalNamingResources>
    <Resource name="UserDatabase" auth="Container"
              type="org.apache.catalina.UserDatabase"
              description="User database that can be updated and saved"
              factory="org.apache.catalina.users.MemoryUserDatabaseFactory"
              pathname="conf/tomcat-users.xml" />
  </GlobalNamingResources>

  <Service name="Catalina">
        <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />
        <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />
	     <Engine name="Catalina" defaultHost="localhost">

        <Realm className="org.apache.catalina.realm.LockOutRealm">
        <Realm className="org.apache.catalina.realm.UserDatabaseRealm"
               resourceName="UserDatabase"/>
      	 </Realm>

      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
          prefix="localhost_access_log." suffix=".txt"
          pattern="%h %l %u %t &quot;%r&quot; %s %b" />
      </Host>
    </Engine>
  </Service>
</Server>
```

【Tomcat】と【Apache】の連携に関して

websocketの接続が、1分程度で切断されてしまいます。

サーバサイドでは「broken pipe」となっており、クライアントサイドではエラーコード1006が出力されていました。
websocketのエラーコードにはセキュリティ上の観点から情報隠蔽を意図した「何かのエラー：1006」という物があり、クライアントからは事実上何も情報が得られていません。

**keepaliveのような設定**があるのかと思い調べたのですが、今の所見つけられていません。
テストで作った簡易チャットでは、チャットを打ち続けていれば切断されないため、いわゆるpingpongのようなものを定期的に行えば維持できるとは思うのですが、それで正しいのか悩んでいます。

---

**構成（サーバ）**
|役割|使っているもの|
|:--|:--|
|フロント|Nginx 1.12.0（unix domain socket）|
|バックエンド|Golang 1.11.4（FW echo）、golang.org/x/net/websocket|

### 発生している問題・エラーメッセージ

[サーバ] Nginx アクセスログ
indexページに普通に接続して、websocket接続の切り替え（101）も成功している
```
192.168.10.2 - - [11/Feb/2019:14:14:11 +0900] "GET / HTTP/1.1" 200 1498 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36" "-"
192.168.10.2 - - [11/Feb/2019:14:15:15 +0900] "GET /ws HTTP/1.1" 101 17 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36" "-"
```

[サーバ] Nginx エラーログは出力なし

[サーバ] Go-echoアプリサーバから出している切断時ログ
大体1分後に切断されている。エラー内容は「broken pipe」
ぴったり1分じゃないのは「test」と一言チャットしたせいです。
```
2019/02/11 14:14:11 Added new client. Clients connected: 1
2019/02/11 14:15:15 Delete client number: 1
2019/02/11 14:15:15 Error: write unix /srv/www/localhost/tmp/goecho.sock->@: write: broken pipe
```

[クライアント] エラーオブジェクトeの内容
chromeで、onclose（切断）時にconsole.logに出力しました。
このエラーコードには意味がないようです。
参考リンク→[WebSocketの仕様を調べていたら頭がどうにかなりそうだった。](http://blog.aklaswad.com/2012/000517.html)
```
CloseEvent {
	isTrusted: true, 
	wasClean: false, 
	code: 1006, 
	reason: "", 
	type: "close", 
	…
}
WebSocket {
	url: "ws://localhost/ws", 
	readyState: 3, 
	bufferedAmount: 0, 
	onopen: ƒ, 
	onerror: ƒ, 
	…
}
```

原因や定番の対策につきまして、お教えいただきたいです。
よろしくお願いいたします。

websocket接続が一定時間で切断されてしまう

### 実現したいこと
どこでつまずいてるか
わからないです
どうしたら接続できますか？

### 発生している問題・分からないこと
{'error': 'ERR-5106 Invalid request parameter. channel'}
パラメーターが不正な場合に返ってきます。
って返ってきます



### 該当のソースコード

```python
import asyncio
import json
import websockets

async def subscribe_to_orderbook():
    uri = "wss://api.coin.z.com/ws/public/v1"
    async with websockets.connect(uri) as websocket:
        subscribe_msg = {
            "command": "subscribe",
            "channel": "orderbook",
            "symbol": "BTC_JPY"
        }
        await websocket.send(json.dumps(subscribe_msg))

        while True:
            response = await websocket.recv()
            data = json.loads(response)
            if "channel" in data and data["channel"] == "orderbook":
                # 板情報の処理
                print("板情報:", data)

async def main():
    await subscribe_to_orderbook()

if __name__ == "__main__":
    asyncio.run(main())
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
{'error': 'ERR-5106 Invalid request parameter. channel'}
パラメーターが不正な場合に返ってきます。
って返ってきます

### 補足
特になし

python WebSocketAPI asyncio接続できないです

herokuにnode.jsで書いたwebsocketを上げunityで２台のmacを通信させたいんですが、
herokuにdeployしてopen appをクリックするとCannot GET /と表示されます。
ローカルでは動作を確認してます




```
//heloku.js(herokuにあげるやつ)
var WebSocketServer = require('ws').Server
	, http = require('http')
	, express = require('express')
	, app = express()
	, port = process.env.PORT || 5000;

app.use(express.static(__dirname + '/'));

var server = http.createServer(app);
server.listen(port,process.env.IP);

console.log('http server listening on %d', port);

var player1 ;
var player1a = 0;
var player2 ;
var player2a = 0;
var count = 0;


var hostPC;

var wss = new WebSocketServer({server});

wss.broadcast = function (data) {
	for (var i in this.clients) {
		this.clients [i].send (data);
	};
};


console.log('websocket server created');
wss.on('connection', function(ws) {
		switch(count){
			case 0:
				player1 = ws;
				player1.send(JSON.stringify({"ID":1,"name":"my"}));
				player1a = 1;
			break;
			case 1:
				player2 = ws;
				player2.send(JSON.stringify({"ID":2,"name":"my"}));
				player2a = 1;
			break;
			};
			
			count ++;
			if (count >= 3){
				count = 0;
				player1a = 0;
				player2a = 0;
				console.log ('reset');
			};

			//誰からでもメッセージを受信した時
			ws.on ('message', function (message) {
				var now = new Date();
				console.log (now.toLocaleString() + ' Received: %s', message);
				wss.broadcast (message);
				
			});
			//player1からメッセージを受信した時
			if (player1a === 1) {
				player1.on('message', function (pl2) {
					if (player2a === 1) {
						
										
						if (~pl2.indexOf('my')) {
							//data2にmyを含む場合の処理
							pl2 = pl2.replace( /my/g , "opponent" ) ;
						}else if ( ~pl2.indexOf('opponent')) {
							pl2 = pl2.replace( /opponent/g , "my" ) ;
						};
						
						var data2 = JSON.parse(pl2);
						player2.send(JSON.stringify(data2));
					};
				});
				
				//切断時
				player1.on('close', function () {
						player1a = 0;
						count = 0;
						console.log ('player1:reset');
				});
			};
			
			//player2からメッセージを受信した時
			if (player2a === 1){	
				player2.on('message', function (pl1) {
					if (player1a === 1) {
							
						if (~pl1.indexOf('my')) {
							//data2にmyを含む場合の処理
							pl1 = pl1.replace( /my/g , "opponent" ) ;
						}else if ( ~pl1.indexOf('opponent')) {
							pl1 = pl1.replace( /opponent/g , "my" ) ;
						};	
						
						/*if ( data1.match(/my/)) {
							//data2にmyを含む場合の処理
							data1 = data1.replace( /my/g , "opponent" ) ;
						}else if ( ~data1.indexOf('opponent')) {
							data1 = data1.replace( /opponent/g , "my" ) ;
						};
						*/			
						var data1 = JSON.parse(pl1);
						player1.send(JSON.stringify(data1));
						
					};
				});
				//切断時
				player2.on('close', function () {
						player2a = 0;
						count = 1;
						console.log ('player2:reset');
				});
				
			};

});

```

//packagejson
{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "main": "heloku.js",
  "dependencies": {
    "express": "*",
    "ws": "*"
  },
  "scripts": {
    "start": "node heloku.js"
  },
  "engines": {
    "node": "6.11.4"
  }

}

```

heroku node.js アプリを開いたらCannot GET /と表示される

IoTで用いる双方向通信技術はMQTTとWebSocketのどちらなのか、なんでもご意見を頂きたいと思い投稿させて頂きます。

一般的にはMQTTがIoTと言われていますが、以下の観点からだと思います。

・処理が軽い
　=> つまり、端末やサーバの費用が安くなる、実装しやすいなどのメリットがある

一方で、MQTTは企業などのFireWallを抜けれないと考えています。
ということはどこでも使えるIoT製品には不向き？と思われます。

WebSocketは接続にHTTPフローを利用しておりポート番号も同じことから多くのFireWallを抜けれるのではないかと考えています。
一部のFireWallで強固なものはWebSocketは通さないようですが、多くの場合が通せるのでは？と考えましたが違いますでしょうか？

家庭向けの製品はMQTTでIoTの用途によって、どっちが良いか違うなどのご意見も何でもお願いします。

（具体性が無いのでコメントできないとのご意見がありましたので以下を追記修正します）
温度センサーは双方向通信を必要としませんが、そのような一般的なIoTでの場合について、
みなさんの個人のご意見をお願いします。

ちなみに私の意見は、WebScoketにすることでサーバなどの費用が上がりますが、
　・IoTデバイスでWebSocketも利用可能な場合が多いこと
　・サーバ費用などがそこまで高く無いこと
から、少しでも利用環境が広がるようにWebSocketが良いのかとも思っています。

今後、企業のFireWallでMQTTも普通に利用できるようになれば良いかとも思いますがセキュリティ上もそちらの方向は難しいかと考えています。

IoTで用いるのはMQTTとWebSocketどっち？

クライアント(アプリ)とのWebSocketハンドシェイク成功後に、アプリをバックグラウンドに置いたりすると、
コネクションが切れてサーバー側ではwebsocketのclose処理が呼ばれます。
この挙動は検証で既にわかっているのですが、例えばクライアントが急に圏外になったり、電源が切れたりした場合でも、サーバー側のclose処理でハンドリングできるのでしょうか。

様々な情報を調べたのですが、切断に関してはっきりとした情報は現時点では見つかっていません。
もしよろしければ詳しい仕様が載っているサイトなども合わせてご紹介いただけると嬉しいです。

よろしくお願いいたします。

websocketのコネクション切断時の処理について

### 前提

Vue3 + JavaScript + Vuetify3 beta + Vite 環境
上記の構成でプロジェクトを作成しています。

コンパイル後<ローカルIP:3000>にアクセスした際、
『WebSocket connection to 'wss://<ローカルIP>:3000/' failed: 』
のエラーが起き、数秒ごとにページの再読み込みを行う状態です。

同現象について
---
ポピュラーなエラーのようで検索すると無限に情報が出てきます。
……が、結局解決していない場合も多くクリティカルな情報を見つけられていない状態です。


### 実現したいこと

HRMの停止、またはwebsocketの通信

### 発生している問題・エラーメッセージ

ブラウザ上にて以下のループ
```
[vite] connecting...
WebSocket connection to 'ws://<ローカルIP>:3000/' failed: 
[vite] server connection lost. polling for restart...
```
### 該当のソースコード
**・vite.config.js**
```JavaScript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
        vuetify({
            autoImport: true,
        }),
    ],
    server: {
        host: true,
    },
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
```

### 試したこと

参考にしたURLを記載します。

##### ・Viteでブラウザが再読込が繰り返す問題を解決
※環境は違いますが詳しい説明が記載してあります。
https://diary.varwww.com/posts/2021/vite-unexpected-reload-loop.html

##### ・Docker環境でvite+Nginxを動作させた時に詰まったポイント
※環境は違いますが発生している現象は同じです。
URL: https://qiita.com/tomopict/items/2c321374e917cc679efb

#####  ・公式ドキュメント
server.hmr の項目でHMRの無効について記載がありますが、
hmr: false でも hmr{ overlay: false }でも無効にできなかったため諦めています。
URL: https://vitejs.dev/config/#server-force

##### ・Docker環境でvite+Nginxを動作させた時に詰まったポイント
※こちらも環境は違いますが発生している現象は同じです。
https://qiita.com/kiyoshiro/items/9dcba9af830f7ca51323

#####  ・stack overflow で検索(改善せず)
httpsを有効
```JavaScript
//略
    server: {
        https: true,
    },
//略
```
https://stackoverflow.com/questions/71018015/vite-js-vue-unwanted-page-reload-happens-only-on-samsung-internet/71071616#71071616


同現象(未解決)
https://stackoverflow.com/questions/70290931/nuxt-3-vite-hmr-infinite-reload-failed

port,protocolの変更
https://github.com/vitejs/vite/issues/1653
```JavaScript
//略
  server: {
    hmr: {
      host: 'some.server,
      port: 443,
      protocol: 'wss'
    }
  }
//略
```

HRMを無効にできないという人(未解決)
https://stackoverflow.com/questions/71956576/vitejs-websocket-connection-to-wss-hostport-failed-due-to-hmr

port,clientPortの指定
https://stackoverflow.com/questions/71050909/how-to-proxy-vites-hmr-request-in-docker
```JavaScript
    server: {
        port: 8015, //default is 3000 but I have multiple apps within one site running so I need to define multiple custom ports on the same machine / container
        https: true,
        hmr: {
            clientPort: 9026,
        },
    },
```

### 補足情報（FW/ツールのバージョンなど）
 
|主要なツール|ver|
|:--|:--:|
|npm |8.5.5|
|node|16.15.0|
|@vue/cli|5.0.4| 


ブラウザ
・Edge
・Chrome

お手数をおかけしますが、情報ありましたらお願いいたします。

[Vite] 『WebSocket connection to '<ローカルIP>' failed』 無限リロード

お世話になっております。
下記知見のある方がいらっしゃいましたら、ご教示お願いいたします。

#起きている問題
```
WebSocket connection to 'ws://localhost:8080/' failed:
```
websocketでブラウザを動かしたいのですが、
上記エラーが発生し、正常に稼働しません。

#試したこと
```
https://www.fixes.pub/program/388275.html
```
上記のサイトを参考に、`wss://localhost:8080/`(index.html:112)に修正し実行しましたが、
結果は変わりませんでした。

#実行ファイル

```
#index.html

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>Chat</title>
<style>
    .container {
        width: 600px;
    }
    
    .box {
        overflow: hidden;
    }
    
    .left {
        background-color: #D3D3D3;
        padding: 20px;
        margin: 5px;
        width: 300px;
        float: left;
    }
    
    .right {
        background-color: #ADFF2F;
        padding: 20px;
        margin: 5px;
        width: 300px;
        float: right;
    }
</style>
<script src="http://code.jquery.com/jquery-2.2.4.js"></script>
<script>
    (function($) {
        var settings = {};

        var methods = {
            init: function(options) {
                settings = $.extend({
                    'uri': 'ws://localhost:8080',
                    'conn': null,
                    'message': '#message',
                    'display': '#display'
                }, options);
                $(settings['message']).keypress(methods['checkEvent']);
                $(this).chat('connect');
            },

            checkEvent: function(event) {
                if (event && event.which == 13) {
                    var message = $(settings['message']).val();
                    if (message && settings['conn']) {
                        settings['conn'].send(message + '');
                        $(this).chat('drawText', message, 'right');
                        $(settings['message']).val('');
                    }
                }
            },

            connect: function() {
                if (settings['conn'] == null) {
                    settings['conn'] = new WebSocket(settings['uri']);
                    settings['conn'].onopen = methods['onOpen'];
                    settings['conn'].onmessage = methods['onMessage'];
                    settings['conn'].onclose = methods['onClose'];
                    settings['conn'].onerror = methods['onError'];
                }
            },

            onOpen: function(event) {
                $(this).chat('drawText', 'サーバに接続', 'left');
            },

            onMessage: function(event) {
                if (event && event.data) {
                    $(this).chat('drawText', event.data, 'left');
                }
            },

            onError: function(event) {
                $(this).chat('drawText', 'エラー発生!', 'left');
            },

            onClose: function(event) {
                $(this).chat('drawText', 'サーバと切断', 'left');
                settings['conn'] = null;
                setTimeout(methods['connect'], 1000);
            },

            drawText: function(message, align = 'left') {
                if (align === 'left') {
                    var inner = $('<div class="left"></div>').text(message);
                } else {
                    var inner = $('<div class="right"></div>').text(message);
                }
                var box = $('<div class="box"></div>').html(inner);
                $('#chat').prepend(box);
            },
        }; // end of methods

        $.fn.chat = function(method) {
                if (methods[method]) {
                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === 'object' || !method) {
                    return methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' + method + ' does not exist');
                }
            } // end of function
    })(jQuery);

    $(function() {
        $(this).chat({
            'uri': 'ws://localhost:8080',
            'message': '#message',
            'display': '#chat'
        });
    });
</script>
</head>

<body>
    <input type="text" id="message" size="50" />
    <div id="chat" class="container"></div>
</body>

</html>
```

```
#chat-server.php

<?php

namespace htdocs;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new \SplObjectStorage();
    }

    public function onOpen(ConnectionInterface $conn)
    {
        // Store the new connection to send messages to later
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        $numRecv = count($this->clients) - 1;
        echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');

        foreach ($this->clients as $client) {
            if ($from !== $client) {
                // The sender is not the receiver, send to each client connected
                $client->send($msg);
            }
        }
    }
    public function onClose(ConnectionInterface $conn)
    {
        // The connection is closed, remove it, as we can no longer send it messages
        $this->clients->detach($conn);

        echo "Connection {$conn->resourceId} has disconnected\n";
    }
    public function onError(ConnectionInterface $conn, \Exception $e)
    {
        echo "An error has occurred: {$e->getMessage()}\n";

        $conn->close();
    }
}
```

```
#Chat.php

<?php

namespace htdocs;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new \SplObjectStorage();
    }

    public function onOpen(ConnectionInterface $conn)
    {
        // Store the new connection to send messages to later
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        $numRecv = count($this->clients) - 1;
        echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');

        foreach ($this->clients as $client) {
            if ($from !== $client) {
                // The sender is not the receiver, send to each client connected
                $client->send($msg);
            }
        }
    }
    public function onClose(ConnectionInterface $conn)
    {
        // The connection is closed, remove it, as we can no longer send it messages
        $this->clients->detach($conn);

        echo "Connection {$conn->resourceId} has disconnected\n";
    }
    public function onError(ConnectionInterface $conn, \Exception $e)
    {
        echo "An error has occurred: {$e->getMessage()}\n";

        $conn->close();
    }
}
```

#GitHub
```
https://github.com/karirin/chat_app
```

#参考
```
http://challenge.no1s.biz/programming/php/158
```