HTML5のクールな新機能はWebSocketsです。これにより、AJAXリクエストなしでサーバーと通信できます。今日、Bingoは、誰もがPHP環境のサーバー側を介してWebSocketを実行し、クライアントを作成し、WebSocketsプロトコルを介してサーバー側の情報を送信および受信できるようにします。
WebSocketsとは何ですか？
WebSocketsは、（TCP）インターフェイスで双方向通信を実行し、プッシュテクノロジータイプを実行するテクノロジーです。同時に、WebSocketsはこれまでのところW3C標準に基づいています。
WebSocketsは何に置き換えられますか？ WebSocketsは、長いポーリング（PHPサーバープッシュテクノロジー）を置き換えることができます。これは興味深い概念です。クライアントは、サーバーにリクエストを送信しますその後、別のリクエストを送信します。これにはその利点があります。どちらの接続でも遅延を減らし、1つの接続がすでに開いている場合に別の新しい接続を作成する必要はありません。しかし、ロングポリーは派手なテクニックではなく、要求の一時停止が発生する可能性があるため、新しい接続が必要になります。
一部のAJAXアプリケーションは、上記のテクノロジーを使用しています。これは、多くの場合、低リソースの使用率に起因します。
事前にいくつかの接続ポートをセットアップすることなく受信したいクライアントにサーバーが起動してデータを送信する場合、それがどれほど素晴らしいか想像してみてください！プッシュテクノロジーの世界へようこそ！
ステップ1：WebSocketサーバーを取得します
このチュートリアルでは、サーバーの実行よりもクライアントの作成により焦点を当てます。
Windows 7に基づいてXAMPPを使用して、実行中のPHPをローカルに実装しています。 phpwebsocketsはPHP Websocketサーバーです。 （私の経験では、このバージョンにはいくつかの小さな問題があります。私はそれをいくつかの変更して、あなたと共有するためにソースファイルをアップロードしました。）以下のバージョンもWebSocketを実装できます他のバージョン。または、以下のチュートリアルを読み続けます。
JWebsocket（Java）
Web-Socket-Ruby（Ruby）
Socket IO-Node（node.js）
Apacheサーバーを開始します
ステップ2：URLとポートを変更します
以前のインストールによると、サーバーを変更すると、以下はsetup.class.phpの例です。
| パブリック関数__construct（$ host = 'localhost'、$ port = 8000、$ max = 100） { $ this-> createSocket（$ host、$ port）; } |
ファイルを閲覧し、必要に応じて変更を加えます。
ステップ3：クライアントの作成を開始します
これが私のclient.phpファイルです：
| <！doctype html> <html> <head> <スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <Title> WebSocketsクライアント</title> </head> <body> <div id = "wrapper"> <div id = "container"> <H1> WebSocketsクライアント</h1> <div id = "chatlog"> </div> <！ - #chatlog-> <p id = "examples"> eg 'hi'、 'name'、 'age'、 'today'を試してください</p> <入力id = "text" type = "text" /> <ボタンID = "disconnect"> disconnect </button> </div> <！ - #container-> </div> </body> </html> |
基本的なテンプレートを作成しました：チャットログコンテナ、入力ボックス、切断ボタン。
ステップ4：CSSを追加します
派手なコードはありません。タグのスタイルを扱うだけです。
体 { |
ステップ5：WebSocket
イベントまず、WebSocketイベントの概念を試して理解してみましょう。
WebSocketイベント：
3つのWebSocketイベントを使用します。
Onopen：インターフェイスが開いたとき
オンメサージ：メッセージが受信されたとき
OnClose：インターフェイスが閉じているとき
これをどのように達成しますか？
最初にWebSocketオブジェクトを作成します
var socket = new WebSocket（＆ldquo; ws：// localhost：8000/socket/server/startdaemon.php＆rdquo;）;
次に、次のようにイベントを検出します
| socket.onopen = function（）{ アラート（「ソケットが開かれました！」）; } |
メッセージを受け取ったときにこれを行います：
| socket.onmessage = function（msg）{ アラート（MSG）; } |
しかし、私たちはまだアラートの使用を避けようとしているので、学んだことをクライアントページに統合することができます。
ステップ6：JavaScript
まず、jqueryの準備ができているため、コードをDocument.ready機能に入れ、次にユーザーのブラウザがWebSocketをサポートしているかどうかを確認する必要があります。サポートされていない場合は、Chromeブラウザページにリンクを追加します。
| $（document）.ready（function（）{ if（！（ "websocket" in window））{ $（ '＃chatlog、input、button、#examples'）。フェードアウト（ "fast"）; $（ '<p>ああ、いや、WebSocketsをサポートするブラウザが必要です。<a href = "google'> http://www.google.com/chrome"> Google Chrome </a>？</p > '）。appendto（'＃container '）; }それ以外{ //ユーザーにはWebSocketsがあります 接続する（）; function connect（）{ //接続関数コードは以下にあります } }）; |
ご覧のとおり、ユーザーのブラウザがWebSocketをサポートしている場合、Connect（）関数を実行します。コア関数は次のとおりです。オープン、クローズ、およびイベントの受信を開始します。
サーバー上のURLを定義します。
| varソケット; var host = "ws：// localhost：8000/socket/server/startdaemon.php"; |
URLにHTTPがない理由がわかりますか？まあ、はい、これは別のプロトコルを使用するWebsocket URLです。
以下のConnect（）関数を完了し続けます。コードにコードを入れて、コードに問題がある場合は、ユーザーに知らせることができます。 WebSocketを作成し、情報をメッセージ（）関数に渡すと、後で説明します。 Onopen、Onmessage、およびOnclose関数を作成します。 ユーザーにポートステータスを提供する必要はありませんが、主にデバッグの利便性のために配置することに注意する必要があります。
| 接続= 0 open = 1 閉じた= 2 function connect（）{ 試す { varソケット; var host = "ws：// localhost：8000/socket/server/startdaemon.php"; var socket = new WebSocket（host）; メッセージ（ '<p class = "event"> socket status：'+socket.readystate）; socket.onopen = function（）{ message（ '<p class = "event"> socket status：'+socket.readystate+'（open）'）; } socket.onmessage = function（msg）{ message（ '<p class = "message">受信：'+msg.data）; } socket.onclose = function（）{ message（ '<p class = "event"> socket status：'+socket.readystate+'（closht）'）; } } catch（例外）{ メッセージ（ '<p>エラー'+例外）; } } |
メッセージ（）関数はシンプルで、ユーザーに提示するテキストがチャットログコンテナに記入されます。 ソケットイベント関数にパラグラフ（<p>）タグに適切なクラスを作成し、メッセージ関数に1つの段落の終了タグのみがあります。
| 関数メッセージ（MSG）{ $（ '＃chatlog'）。append（msg+'</p>'）; } |
現在の結果
上記のチュートリアルを段階的にフォローしている場合、それは素晴らしいことです。HTML/CSSテンプレートを作成し、WebSocket接続を作成および確立した状態で作成し、接続を作成してユーザーの進捗状況を更新し続けました。
ステップ7：データを送信します
これで、送信ボタンがありますが、キーボードイベントを押して送信機能を実行するユーザーを聞く必要があります。
| $（ '＃text'）。keypress（function（event）{ if（event.keycode == '13'）{ 送信（）; } }）; |
これがsend（）関数です：
| function send（）{ var text = $（ '＃text'）。val（）; if（text == ""）{ メッセージ（ '<p class = "警告">メッセージを入力してください'）; 戻る ; } 試す { socket.send（テキスト）; メッセージ（ '<p class = "event">送信：'+テキスト） } catch（例外）{ メッセージ（ '<p class = "警告">エラー：' +例外）; } $（ '＃text'）。val（ ""）; } |
ここに必要です：
socket.send（）;
追加のコードは次の作業を行います。ユーザーがクリックした後、ユーザーが何も入力していないかどうかを検出し、入力ボックスをクリアし、メッセージ（）関数を実行します。
ステップ8：ソケットを閉じます
ソケットを閉じる操作は非常に簡単です。クリックイベントを切断ボタンに追加して聞くだけです。
| $（ '＃disconnect'）。クリック（function（）{ socket.close（）; }）; |
JavaScriptコードを完了します
| $（document）.ready（function（）{ if（！（ "websocket" in window））{ $（ '＃chatlog、input、button、#examples'）。フェードアウト（ "fast"）; $（ '<p>ああ、いや、WebSocketsをサポートするブラウザが必要です。<a href = "google'> http://www.google.com/chrome"> Google Chrome </a>？</p > '）。appendto（'＃container '）; }それ以外{ //ユーザーにはWebSocketsがあります 接続する（）; function connect（）{ varソケット; var host = "ws：// localhost：8000/socket/server/startdaemon.php"; 試す { var socket = new WebSocket（host）; メッセージ（ '<p class = "event"> socket status：'+socket.readystate）; socket.onopen = function（）{ message（ '<p class = "event"> socket status：'+socket.readystate+'（open）'）; } socket.onmessage = function（msg）{ message（ '<p class = "message">受信：'+msg.data）; } socket.onclose = function（）{ message（ '<p class = "event"> socket status：'+socket.readystate+'（closht）'）; } } catch（例外）{ メッセージ（ '<p>エラー'+例外）; } function send（）{ var text = $（ '＃text'）。val（）; if（text == ""）{ メッセージ（ '<p class = "警告">メッセージを入力してください'）; 戻る ; } 試す { socket.send（テキスト）; メッセージ（ '<p class = "event">送信：'+テキスト） } catch（例外）{ メッセージ（ '<p class = "警告">'）; } $（ '＃text'）。val（ ""）; } 関数メッセージ（MSG）{ $（ '＃chatlog'）。append（msg+'</p>'）; } $（ '＃text'）。keypress（function（event）{ if（event.keycode == '13'）{ 送信（）; } }）; $（ '＃disconnect'）。クリック（function（）{ socket.close（）; }）; } //接続を終了します } // ENDENSを終了します }）; |
ステップ9：WebSocketサーバーを実行する場合、コマンドラインを入力する必要があります。 XAMPPコントロールパネルの[シェル]ボタンをクリックして、以下を入力します。
| php -q path to server.php |
これで、WebSocketサーバーが実行されています！
ミッションは行われます！
ページが読み取られると、WebSocket接続を作成する試みが行われ、ユーザーは情報を入力してサーバーから受信できます。このチュートリアルを読んでくれてありがとう。 WebSocket APIを介してHTML5 WebSocketの最新の開発について学ぶことができます。