JavaScript Websocket入門!10のサンプルコードで学ぶ

JavaScript WebSocketを使ったチャットアプリのサンプル画像JS
この記事は約11分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptでWebSocketを使ったリアルタイム通信ができるようになります。

WebSocketとは何か、基本的な使い方や注意点、応用例などを、10個のサンプルコードを通して分かりやすく解説します。

WebSocketを使いこなして、素晴らしいWebアプリを作成しましょう!

●WebSocketとは

WebSocketは、インターネット上でリアルタイム通信を実現する技術のひとつです。

これまでのHTTP通信はリクエストとレスポンスが交互に行われる形でしたが、WebSocketではクライアントとサーバーが双方向でデータを送受信できるため、リアルタイム性の高い通信が可能です。

○リアルタイム通信の必要性

リアルタイム通信は、チャットアプリやゲーム、リアルタイムな通知システムなど、さまざまなWebアプリケーションで利用されています。

これにより、ユーザーがよりスムーズに情報を共有し、効率的に作業を進めることができます。

●WebSocketの基本的な使い方

WebSocketの使い方を学ぶために、まずはWebSocketの接続と切断を行うサンプルコードを見ていきましょう。

○サンプルコード1:WebSocketの接続と切断

このコードでは、WebSocketでサーバーに接続し、その後切断する方法を紹介しています。

この例では、接続先のURLを指定してWebSocketオブジェクトを作成し、接続を行っています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com');

// 接続が開かれたときのイベントハンドラ
ws.addEventListener('open', (event) => {
  console.log('WebSocket接続が開かれました', event);
});

// 接続が閉じられたときのイベントハンドラ
ws.addEventListener('close', (event) => {
  console.log('WebSocket接続が閉じられました', event);
});

// WebSocket接続を閉じる
ws.close();

●WebSocketでのデータ送受信

次に、WebSocketでデータの送信と受信を行うサンプルコードを見ていきましょう。

○サンプルコード2:メッセージの送信と受信

このコードでは、WebSocketを用いてメッセージの送信と受信を行う方法を紹介しています。

この例では、sendメソッドを用いてメッセージを送信し、messageイベントを利用してメッセージを受信しています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com');

// 接続が開かれたときのイベントハンドラ
ws.addEventListener('open', (event) => {
  console.log('WebSocket接続が開かれました', event);

  // メッセージを送信
  ws.send('こんにちは!');
});

// メッセージを受信したときのイベントハンドラ
ws.addEventListener('message', (event) => {
  console.log('受信したメッセージ:', event.data);
});

// 接続が閉じられたときのイベントハンドラ
ws.addEventListener('close', (event) => {
  console.log('WebSocket接続が閉じられました', event);
});

●イベントハンドラとエラー処理

イベントハンドラを利用してWebSocketの接続状況やエラーを適切に処理する方法を見ていきましょう。

○サンプルコード3:イベントハンドラの利用

このコードでは、イベントハンドラを利用してWebSocketの接続状況を監視する方法を紹介しています。

この例では、openmessagecloseイベントを利用してそれぞれの状況に応じた処理を行っています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com');

// 接続が開かれたときのイベントハンドラ
ws.addEventListener('open', (event) => {
  console.log('WebSocket接続が開かれました', event);
});

// メッセージを受信したときのイベントハンドラ
ws.addEventListener('message', (event) => {
  console.log('受信したメッセージ:', event.data);
});

// 接続が閉じられたときのイベントハンドラ
ws.addEventListener('close', (event) => {
  console.log('WebSocket接続が閉じられました', event);
});

○サンプルコード4:エラー処理

このコードでは、WebSocketでエラーが発生した際の処理方法を示しています。

この例では、errorイベントを利用してエラー情報を取得し、適切な対応を行っています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com');

// エラーが発生したときのイベントハンドラ
ws.addEventListener('error', (event) => {
  console.error('WebSocketでエラーが発生しました', event);
});

●WebSocketの応用例

WebSocketを使ったさまざまな応用例をサンプルコードで紹介していきます。

○サンプルコード5:チャットアプリケーション

このコードでは、WebSocketを利用したチャットアプリケーションの一部を紹介しています。

この例では、メッセージの送信と受信を行い、チャットのやりとりができるようにしています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com/chat');

// 接続が開かれたときのイベントハンドラ
ws.addEventListener('open', (event) => {
  console.log('チャットに接続しました', event);
});

// メッセージを受信したときのイベントハンドラ
ws.addEventListener('message', (event) => {
  console.log('受信したメッセージ:', event.data);
});

// メッセージを送信する関数
function sendMessage(message) {
  ws.send(message);
}

○サンプルコード6:リアルタイムなデータ同期

このコードでは、WebSocketを用いてリアルタイムなデータ同期を行う方法を紹介しています。

この例では、サーバーから送られてくるデータを受信し、クライアント側でデータを更新しています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com/data-sync');

// データを受信したときのイベントハンドラ
ws.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  updateData(data); // 受信したデータでクライアント側のデータを更新する関数
});

○サンプルコード7:マルチプレイヤーゲーム

このコードでは、WebSocketを用いたマルチプレイヤーゲームの一部を紹介しています。

この例では、プレイヤーの操作情報を送信し、他のプレイヤーからの情報を受信してゲームの状態を更新しています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com/game');

// ゲームの状態を更新する関数
function updateGameState(gameState) {
  // ゲームの状態を更新する処理
}

// プレイヤーの操作情報を送信する関数
function sendPlayerAction(action) {
  const actionData = JSON.stringify(action);
  ws.send(actionData);
}

// 他のプレイヤーからの情報を受信してゲームの状態を更新するイベントハンドラ
ws.addEventListener('message', (event) => {
  const gameState = JSON.parse(event.data);
  updateGameState(gameState);
});

○サンプルコード8:リアルタイムな通知システム

このコードでは、WebSocketを用いたリアルタイムな通知システムの一部を紹介しています。

この例では、サーバーから送信された通知を受信し、クライアント側で通知を表示しています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com/notifications');

// 通知を表示する関数
function showNotification(notification) {
  // 通知を表示する処理
}

// 通知を受信したときのイベントハンドラ
ws.addEventListener('message', (event) => {
  const notification = JSON.parse(event.data);
  showNotification(notification);
});

○サンプルコード9:ストリーミングデータの利用

このコードでは、WebSocketを用いてストリーミングデータを利用する方法を紹介しています。

この例では、サーバーから送信されるリアルタイムデータを受信し、クライアント側でデータを利用しています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com/streaming-data');

// データを利用する関数
function processData(data) {
  // データを利用する処理
}

// データを受信したときのイベントハンドラ
ws.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  processData(data);
});

○サンプルコード10:ダッシュボードのリアルタイム更新

このコードでは、WebSocketを用いてダッシュボードのリアルタイム更新を行う方法を紹介しています。

この例では、サーバーから送信される更新情報を受信し、クライアント側でダッシュボードのデータを更新しています。

// WebSocketオブジェクトを作成
const ws = new WebSocket('ws://example.com/dashboard-data');

// ダッシュボードのデータを更新する関数
function updateDashboardData(dashboardData) {
  // ダッシュボードのデータを更新する処理
}

// 更新情報を受信したときのイベントハンドラ
ws.addEventListener('message', (event) => {
  const dashboardData = JSON.parse(event.data);
  updateDashboardData(dashboardData);
});

●注意点と対処法

○セキュリティ

WebSocketを使用する際は、セキュリティにも注意が必要です。

適切な認証や暗号化を行わない場合、悪意のある第三者が通信内容を傍受したり、不正なデータを送信したりするリスクがあります。

wss(WebSocket Secure)プロトコルを使用して、通信内容を暗号化し、認証を行うことでセキュリティを向上させることができます。

○ブラウザの互換性

WebSocketは、ほとんどの最新のブラウザでサポートされていますが、古いブラウザではサポートされていない場合があります。

そのため、WebSocketを使用する前に、ブラウザがWebSocketをサポートしているかを確認し、必要に応じて代替手段を用意することが重要です。

●カスタマイズ方法

○バイナリデータの送受信

WebSocketは、テキストデータだけでなく、バイナリデータも送受信できます。

バイナリデータを送受信する場合、ArrayBufferやBlobオブジェクトを使用してデータを送信し、受信時にも適切なデータ形式に変換して処理する必要があります。

まとめ

WebSocketを使用することで、リアルタイム通信が可能になり、様々なアプリケーションで活用できます。

ただし、セキュリティやブラウザの互換性に注意しながら開発を行うことが重要です。

今回紹介したサンプルコードを参考に、WebSocketを活用したアプリケーション開発に挑戦して下さい。