Using WebSockets with Node.js

The 2021 JavaScript Full-Stack Bootcamp is NOW OPEN FOR SIGNUPS!

WebSocketは、WebアプリケーションにおけるHTTP通信の代替手段です。

クライアントとサーバーの間に長持ちする双方向の通信チャネルを提供します。

いったん確立されたチャネルはオープンに保たれ、低レイテンシーとオーバーヘッドで非常に高速な接続を提供します。

Browser support for WebSockets

WebSocketsはすべてのモダンブラウザでサポートされています。

WebSockets と HTTP の違い

HTTP は非常に異なるプロトコルであり、通信方法も異なります。

HTTP はリクエスト/レスポンス プロトコルで、クライアントがデータを要求するとサーバーがデータを返します。

WebSocketsの場合：

• クライアントが明示的に何かを要求しなくても、サーバーはクライアントにメッセージを送信することができます
• クライアントとサーバーは同時に会話することができます
• メッセージを送信するために交換する必要のあるデータのオーバーヘッドはほとんどありません。

WebSocket は、リアルタイムで長期にわたる通信に適しています。

HTTP は、時々のデータ交換やクライアントが開始するインタラクションに適しています。

HTTP ははるかにシンプルに実装できますが、WebSockets は若干のオーバーヘッドを必要とします。

Secured WebSockets

WebSockets では常に、wss:// というセキュアで暗号化されたプロトコルを使用してください。

ws:// は安全ではない WebSockets バージョン (WebSockets の http://) を指しており、明白な理由により避けるべきです。

新しい WebSockets 接続を作成する

const url = 'wss://myserver.com/something'const connection = new WebSocket(url)

connection は WebSocket オブジェクトです。

接続が正常に確立されると、openイベントが発生します。

connectiononopen プロパティにコールバック関数を割り当てて、それを待ちます。

connection.onopen = () => { //...}

何らかのエラーが発生した場合、onerror関数のコールバックが発生します。

connection.onerror = error => { console.log(`WebSocket error: ${error}`)}

WebSocketを使ってサーバーにデータを送信する

接続が開いたら、サーバーにデータを送信できます。

これは、onopen コールバック関数の中で便利に行うことができます。

connection.onopen = () => { connection.send('hey')}

WebSocketsを使用してサーバーからデータを受信する

onmessagemessageのイベントを受信したときに呼び出されます。

connection.onmessage = e => { console.log(e.data)}

Node.jsでWebSocketsサーバーを実装する。js

wsは、Node.js用の人気のあるWebSocketsライブラリです。

これを使ってWebSocketsサーバを構築します。

ここでは、WebSocketsサーバを構築するために使用します。また、クライアントを実装したり、2つのバックエンドサービス間の通信にWebSocketsを使用するためにも使用できます。

以下の方法で簡単にインストールできます

yarn inityarn add ws

書かなければならないコードはごくわずかです。

const WebSocket = require('ws')const wss = new WebSocket.Server({ port: 8080 })wss.on('connection', ws => { ws.on('message', message => { console.log(`Received message => ${message}`) }) ws.send('ho!')})

このコードでは、ポート 8080 (WebSocket のデフォルト ポート) に新しいサーバーを作成し、接続が確立されたときにコールバック関数を追加して、ho! をクライアントに送信し、受信したメッセージをログに記録します。

See a live example on Glitch

ここでは、WebSockets サーバーのライブ例を紹介します。 https://glitch.com/edit/#!/flavio-websockets-server-example

以下は、サーバーと対話する WebSockets クライアントです。 https://glitch.com/edit/#!/flavio-websockets-client-example

2021年のJavaScript Full-Stack Bootcampは、次の火曜日までサインアップを受け付けています!

More node tutorials:

• npm dependencies and devDependencies
• How to use Sequelize to interact with PostgreSQL
• A brief history of Node.js
• Using WebSockets with Node.
• Expressで解析されたボディと生のボディの両方を取得する方法
• Node.jsのコールバックベースの関数でprometsとawaitを使用する方法
• Node.jsのインストール方法
• npmパッケージマネージャの紹介
• Node.jsを使ってGoogle Analytics APIとインタラクトする方法

li