WebJXの記事はじめに:HTML5のクールな新機能はWebSocketsです。これにより、AJAXリクエストなしでサーバーと通信できます。今日、Bingoは、誰もがPHP環境のサーバー側を介してWebSocketを実行し、クライアントを作成し、WebSocketsプロトコルを介してサーバー側の情報を送信および受信できるようにします。 WebSocketsとは何ですか? WebSocketsは(TCP)インターフェイスで双方向です
HTML5のクールな新機能はWebSocketsです。これにより、AJAXリクエストなしでサーバーと通信できます。今日、Bingoは、誰もがPHP環境のサーバー側を介してWebSocketを実行し、クライアントを作成し、WebSocketsプロトコルを介してサーバー側の情報を送信および受信できるようにします。
WebSocketsとは何ですか?
WebSocketsは、(TCP)インターフェイスで双方向通信を実行し、プッシュテクノロジータイプを実行するテクノロジーです。同時に、WebSocketsは引き続きW3C標準に基づいています。これまでのところ、ChromeおよびSafariブラウザの最新バージョンはすでにWebSocketをサポートしています。
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の例です。
}
ファイルを閲覧し、必要に応じて変更を加えます。
ステップ3:クライアントの作成を開始します
これが私のclient.phpファイルです:
> <>
>
>
>
>例「こんにちは」、「名前」、「年齢」、「今日」を試してください>
>切断>>
</html>
基本的なテンプレートを作成しました:チャットログコンテナ、入力ボックス、切断ボタン。
ステップ4:CSSを追加します
派手なコードはありません。タグのスタイルを扱うだけです。
体
グレー
}
ステップ5:WebSocketイベント
まず、WebSocketイベントの概念を試して理解しましょう。
WebSocketイベント:
3つのWebSocketイベントを使用します。
Onopen:インターフェイスが開いたとき
オンメサージ:メッセージが受信されたとき
OnClose:インターフェイスが閉じているとき
これをどのように達成しますか?
最初にWebSocketオブジェクトを作成します
次に、次のようにイベントを検出します
ソケット。
}
メッセージを受け取ったときにこれを行います:
socket.msgmsg); //素晴らしい!
}
しかし、私たちはまだアラートの使用を避けようとしているので、学んだことをクライアントページに統合することができます。
ステップ6:JavaScript
まず、jqueryの準備ができているため、コードをDocument.ready機能に入れ、次にユーザーのブラウザがWebSocketをサポートしているかどうかを確認する必要があります。サポートされていない場合は、Chromeブラウザページにリンクを追加します。
$
ウィンドウ
$。
$。
ご覧のとおり、ユーザーのブラウザがWebSocketをサポートしている場合、Connect()関数を実行します。コア関数は次のとおりです。オープン、クローズ、およびイベントの受信を開始します。
サーバー上のURLを定義します。
URLにHTTPがない理由がわかりますか?まあ、はい、これは別のプロトコルを使用するWebsocket URLです。これがURLの内訳図です: