もっと見る
ソースコードダウンロード プログラミング関連 ウェブサイト作成リソース 書籍とチュートリアル モバイルゲーム モバイルソフトウェア 記事
ホーム>Web デザインのチュートリアル>WEB標準化

HTML5 WebSocketの基本的な使い方のチュートリアル

著者：Eve Cole 更新時間：2010-10-07 18:43:37

HTML5 の優れた新機能の 1 つは WebSocket です。これを使用すると、AJAX リクエストなしでサーバーと通信できるようになります。現在、Bin Go を使用すると、Php 環境のサーバー側で WebSocket を実行し、クライアントを作成し、WebSocket プロトコルを通じてサーバー側の情報を送受信できるようになります。

WebSocket とは何ですか?

WebSocket は、(TCP) インターフェイスでの双方向通信のためのテクノロジであり、PUSH テクノロジ タイプです。同時に、WebSocket は引き続き W3C 標準に基づいています。これまでのところ、Chrome ブラウザと Safari ブラウザの最新バージョンはすでに WebSocket をサポートしています。

WebSocket は何を置き換えるのでしょうか? WebSocket は、Long Polling (PHP サーバー プッシュ テクノロジ) を置き換えることができます。これは興味深い概念です。クライアントはサーバーにリクエストを送信しますが、サーバーは準備ができていないデータには応答しません。その後、クライアントはデータを受信して​​別のデータを送信します。リクエスト。 。これには利点があります。どちらの接続でも待ち時間が短縮され、接続がすでに開いている場合に新しい接続を作成する必要がなくなります。ただし、ロングポーリングは特別なテクノロジではありません。要求の一時停止が発生する可能性があるため、新しい接続を確立する必要があります。

一部の AJAX アプリケーションは上記の手法を使用します。これは多くの場合、リソース使用率が低いことが原因です。

想像してみてください。事前に接続ポートをいくつか設定しなくても、サーバーが朝に自動的に起動して、データを受信したいクライアントにデータを送信できたら、どんなに素晴らしいことでしょう。 PUSH テクノロジーの世界へようこそ!

ステップ 1: WebSocket サーバーを取得する

このチュートリアルでは、サーバー側の実行やその他の操作ではなく、クライアントの作成に重点を置きます。

Windows 7 で XAMPP を使用して PHP をローカルで実行しています。 phpwebsockets は PHP WebSocket サーバーです。 (私の経験では、このバージョンにはいくつかの小さな問題があります。いくつかの修正を加え、ソース ファイルをアップロードして全員と共有しました) 以下のさまざまなバージョンでも WebSocket を実装できます。1 つが機能しない場合は、他のバージョンを試すことができます。または、以下のチュートリアルを続行してください。

jWebSocket (Java)

ウェブソケットルビー(ルビー)

ソケット IO ノード(node.js)

Apacheサーバーを起動します

ステップ 2: URL とポートを変更する

以前のインストールに基づいてサーバーを変更します。setup.class.php の例を次に示します。

パブリック関数 __construct($host='localhost',$port=8000,$max=100)
{
$this->createSocket($host,$port);
}

ファイルを参照し、必要に応じて変更を加えます。

ステップ 3: クライアントの作成を開始する

基本的なテンプレートを作成しましょう。これが私の client.php ファイルです。



<頭>
<スクリプトソース=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

WebSocket クライアント

<本文>


WebSocket クライアント




例: 「こんにちは」、「名前」、「年齢」、「今日」を試してください







チャット ログ コンテナ、入力ボックス、切断ボタンといった基本的なテンプレートを作成しました。

ステップ 4: CSS を追加する

複雑なコードはなく、ラベル スタイルを処理するだけです。

体 {
フォントファミリー:Arial、Helvetica、サンセリフ;
}
＃容器{
ボーダー:5px ソリッドグレー;
幅:800ピクセル;
マージン:0 自動;
パディング:10ピクセル;
}
#チャットログ{
パディング:5px;
ボーダー:1px ソリッドブラック;
}
#チャットログp {
マージン:0;
}
。イベント{
色:#999;
}
。警告{
フォントの太さ:太字;
色:#CCC;
}

ステップ 5: WebSocket

イベント まず、WebSocket イベントの概念を理解してみましょう。

WebSocket イベント:

3 つの WebSocket イベントを使用します。

onopen: インターフェースが開いているとき

onmessage: メッセージを受信したとき

onclose: インターフェースが閉じているとき

どうすればこれを達成できるでしょうか?

まずWebSocketオブジェクトを作成します

varソケット = 新しいWebSocket("ws://localhost:8000/socket/server/startDaemon.php");

次に、次のようにイベントを検出します

ソケット.onopen = function(){
alert("ソケットがオープンされました!");
}

情報を受け取ったら次のようにしてください。

ソケット.onmessage = function(msg){
アラート(msg); //すごいですね！
}

しかし、私たちは依然としてアラートの使用を避けるよう努めており、今では学んだことをクライアント ページに統合できるようになりました。

ステップ 6: JavaScript

まずコードをjQueryの document.ready 関数に挿入し、次にユーザーのブラウザが WebSocket をサポートしているかどうかも確認します。サポートされていない場合は、Chrome ページへのリンクを追加します。

$(document).ready(function() {
if(!(ウィンドウ内の「WebSocket」)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('

いや、WebSocket をサポートするブラウザが必要です。Google Chrome はどうでしょうか?

').appendTo('#container');
}それ以外{
// ユーザーは WebSocket を持っています
接続する（）;
関数接続(){
//接続関数のコードは以下のとおりです
}
});

ご覧のとおり、ユーザーのブラウザが WebSocket をサポートしている場合は、connect() 関数が実行されます。ここが中心となる機能で、open、close、receive イベントの作成を開始します。

サーバー上の URL を定義します。

var ソケット;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

URL に http が含まれていないことに気づくかもしれません。そうですね、これは別のプロトコルを使用した WebSocket URL です。

connect() 関数を続けてみましょう。コードに問題がある場合にユーザーに通知できるように、コードを try/catch ブロックに置きます。 WebSocket を作成し、後で説明する message() 関数に情報を渡します。 onopen、onmessage、onclose 関数を作成します。 ユーザーにポート ステータスを提供することに注意してください。これは必須ではありませんが、主にデバッグを容易にするために入れています。

接続中 = 0
オープン = 1
閉店 = 2
関数接続(){
試す{
var ソケット;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
var ソケット = 新しい WebSocket(ホスト);
message('

ソケットステータス: '+socket.readyState);
ソケット.onopen = function(){
message('

ソケットステータス: '+socket.readyState+' (オープン)');
}
ソケット.onmessage = function(msg){
message('

受信: '+msg.data);
}
ソケット.onclose = function(){
message('

ソケットステータス: '+socket.readyState+' (クローズ)');
}
キャッチ(例外){
message('

エラー'+例外);
}
}

message() 関数は非常に単純で、ユーザーに表示したいテキストをチャット ログ コンテナに書き込みます。 ソケット イベント関数の段落 (

) タグに適切なクラスを作成し、メッセージ関数には段落終了タグのみを用意します。

関数メッセージ(msg){
$('#chatLog').append(msg+'

');
}

現在の結果

上記のチュートリアルを段階的に実行した場合は、 HTML/CSSテンプレートを作成し、Websocket 接続を作成して確立し、接続を作成することでユーザーの進行状況を最新の状態に保ちました。

ステップ 7: データを送信する

これで送信ボタンができましたが、ユーザーがキーボードを押して送信機能を実行したときのイベントを監視する必要もあります。下の「13」は Enter キーに対応する ASCII コードです。

$('#text').keypress(function(event) {
if (event.keyCode == '13') {
送信（）;
}
});

send() 関数は次のとおりです。

関数 send(){
var text = $('#text').val();
if(text==""){
message('

メッセージを入力してください');
戻る ;
}
試す{
ソケット.send(テキスト);
message('

送信済み: '+text)
キャッチ(例外){
message('

エラー:' +例外);
}
$('#text').val("");
}

以下に必要なものは次のとおりです。

ソケット.send();

追加のコードは、ユーザーが何も入力せずに「戻る」をクリックしたかどうかを検出し、入力ボックスをクリアして、message() 関数を実行します。

ステップ 8: ソケットを閉じる

ソケットを閉じるのは非常に簡単で、切断ボタンのクリック イベント リスナーを追加するだけです。

$('#disconnect').click(function(){
ソケット.クローズ();
});

完全な JavaScript コード

$(document).ready(function() {
if(!(ウィンドウ内の「WebSocket」)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('

いや、WebSocket をサポートするブラウザが必要です。 Google Chrome はどうでしょうか?

').appendTo('#container');
}それ以外{
// ユーザーは WebSocket を持っています
接続する（）;
関数接続(){
var ソケット;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
試す{
var ソケット = 新しい WebSocket(ホスト);
message('

ソケットステータス: '+socket.readyState);
ソケット.onopen = function(){
message('

ソケットステータス: '+socket.readyState+' (オープン)');
}
ソケット.onmessage = function(msg){
message('

受信: '+msg.data);
}
ソケット.onclose = function(){
message('

ソケットステータス: '+socket.readyState+' (クローズ)');
}
キャッチ(例外){
message('

エラー'+例外);
}
関数 send(){
var text = $('#text').val();

if(text==""){
message('

メッセージを入力してください');
戻る ;
}
試す{
ソケット.send(テキスト);
message('

送信済み: '+text)
キャッチ(例外){
message('

');
}
$('#text').val("");
}
関数メッセージ(msg){
$('#chatLog').append(msg+'

');
}
$('#text').keypress(function(event) {
if (event.keyCode == '13') {
送信（）;
}
});
$('#disconnect').click(function(){
ソケット.クローズ();
});
}//接続を終了する
}//その他の終了
});

ステップ 9: WebSocket サーバーを実行するには、いくつかのコマンド ラインを入力する必要があります。XAMPP には、より便利なシェル オプションが用意されています。 XAMPP コントロール パネルの「シェル」ボタンをクリックし、次のように入力します。

php -q パスtoserver.php

これで WebSocket サーバーが実行されました。

これで完了です。

ページが読み取られると、WebSocket 接続の作成が試行され、ユーザーは情報を入力したり、サーバーから情報を受信したりできるようになります。このチュートリアルを読んでいただきありがとうございました。このチュートリアルから HTML5 WebSocket について学ぶことができれば幸いです。 WebSocket APIを通じて HTML5 WebSocket の最新の開発について学ぶことができます。