WebSocketをローカルで試す

仕事でwebsocketを使って試験をする必要があるということで、やり方を事前に調べておこうと思いました。

ローカルでwsを立ち上げる

• まず、node.jsをインストールしておき、npm install wsにてwebsocketをインストールします

// グローバルの場合は-g を付ける
npm install ws

• 以下の処理を 例）server.jsとして保存します

const WebSocket = require('ws');

// WebSocketサーバーを作成し、ポート8080でリッスンします
const wss = new WebSocket.Server({ port: 8080 });

// 接続時の処理
wss.on('connection', function connection(ws) {
  console.log('新しいクライアントが接続しました');

  // メッセージを受信した時の処理
  ws.on('message', function incoming(message) {
    console.log('受信したメッセージ: %s', message);

    // メッセージをクライアントに送信
    ws.send('サーバーからのメッセージ: ' + message);
  });

  // クライアントとの接続が切断された時の処理
  ws.on('close', function close() {
    console.log('クライアントが接続を切断しました');
  });
});

• ターミナルで以下のコマンドを入力して、サーバーを起動します

node server.js
// 当然ですが、cdでserver.jsを配置しているフォルダに移動してから実行する

• 以下のサイトでサーバーが立ち上がっているか確認しましょう
  https://develop.miugle.info/websocket/

入力欄に「ws://localhost:8080」と入力して、「接続」ボタンをクリックすることで、
接続開始が表示されてから、「接続完了」と表示されればOKです。

動作を確認する

• 次にchromeの開発ツールのコンソールなどで以下のソースコードを実行します

const ws = new WebSocket('ws://localhost:8080');

// サーバーからのメッセージを受け取った時の処理
ws.onmessage = function(event) {
  console.log('サーバーからのメッセージ: ', event.data);
};

// サーバーにメッセージを送信
ws.onopen = function(message) {
  ws.send('クライアントからのメッセージ :'+ message);
};

• ws.send('aa');をコンソールログで実行することで、サーバー側のログには「受信したメッセージ: aa」と表示されます
• そしてサーバー側では、クライアントから受け取ったメッセージを「サーバーからのメッセージ: ' + クライアントから送られてきたメッセージ」という形で返すようにしていますので、ブラウザのコンソールには「サーバーからのメッセージ: サーバーからのメッセージ: aa」として出力されます
• コンソールで、ws.close()とすることで、接続が切れて、サーバー側の出力に、「クライアントが接続を切断しました」と表示されます