JavaScript WebSocketを使ってサーバーとデータをやり取りする

WebSocketを使ってサーバーとやり取りするには、メッセージ送信を使って行います。サーバーから接続された場合やデータが送信されると、クライアント側には「message」イベントが発生します。クライアント側では、WebSocketオブジェクトのonmessageプロパティにイベントハンドラを設定するか、addEventListener()メソッドを使ってイベントリスナーを使って設定します。イベントハンドラには、サーバーから送信されたデータを格納したオブジェクトが渡されます。このオブジェクトのdataプロパティにサーバーから送信されたメッセージが入ります。クライアント側からサーバーにデータを送信する場合は、WebSocketオブジェクトのsend()メソッドを使います。パラメータには、送信するデータ（テキストデータ）を指定します。サーバー側で処理した結果が返された場合、messageイベントが発生するので、状況に応じて処理します。

Node.jsについて
Node.jsとは、PHPのようにサーバー側で動作するプログラムです。特徴としてはサーバー側のプログラムをJavaScriptで記述できることです。Node.jsでWebSocketsを使用する場合は。exprerssやwebsocket-server(Node WebSocket Server)などを追加インストールする必要があります。

 <body>
<script>
    window.addEventListener("load", function(){
        var ele = document.getElementsByTagName("output")[0];
        //WebSocketオブジェクトを生成する
        var ws = new WebSocket("ws://192.168.11.1:9001");

        //受信したデータを表示
        ws.onmessage = function(msg){
            ele.innerHTML +="サーバーから："+msg.data+"<br>";
        }
        //接続時のサーバーからのメッセージを表示
        ws.onopen = function(data){
            ele.innerHTML = "接続完了イベント発生<br>";
        }

        document.getElementById("check").addEventListener("click",function(){
            //フォームに入力した文字を読み出す
            var text = document.getElementById("uName").value;
            //サーバーに入力した文字を送信
            ws.send(text);
        }, false)
    }, false);
</script>
<h1>データを送受信する</h1>
<form>
    文字：<input type="text" value="yamada" id="uName"><br>
    <input type="button" value="データ送信" id="check">
</form>
<output></output>

</body>

サーバー側のプログラムコード（ws.js）

 var ws = require('websocket-server');
      //サーバー生成
      var server = ws.createServer();
      //接続時のイベント
      server.addListener('connection',function(conn){
        //接続時にメッセージを送信
        conn.send("Connect OK");
        console.log("Connect...");

        //メッセージ受信時のイベント
        conn.addListener('message',function(message){
          //メッセージを送信
          conn.send("Length = "+message.length);
          console.log("Send data");
        });
      });
      server.listen(9002);

サーバー側でws.jsを実行した後に、ブラウザでアクセスします。サーバーに接続すると、サーバーからのメッセージが表示されます。

テキストフィールドに文字を入力し、データ送信ボタンをクリックすると、文字がサーバーに送信されます。その後、文字の長さを計算した結果がサーバーから返され表示されます。

カテゴリー:JavaScript