Node.js＋Express＋Socket.IO入門

Socket.IO を使うと双方向の非同期通信が可能になります。今回はその入門編ということで、HTML の input 要素に入力した文字列をサーバに送信し、それをサーバで受信し、そのデータを再びクライアントに送信するプログラムを作成したので紹介します。Express や Socket.IO を使うことで、このようなプログラムをとても簡単に作成することができます。

 

♦ Express と Socket.IO のインストール（Windows）

まず Node.js をインストールしてください。Node.js をインストールすれば、npm も一緒にインストールされます。 続いて、D ドライブの直下に webapp フォルダを作成し、コマンドプロンプトから下記のように入力すると Express と Socket.IO をローカルインストールすることができます。

〈コマンドプロンプト（cmd.exe）〉

cd /d D:\webapp
npm init（全てEnterでOK）
npm install express socket.io

 

♦ プログラムの作成

データを送信・受信する関数は、クライアント側もサーバ側も次のようになります。
 データの送信：emit(event_name, data)
 データの受信：on(event_name, function (data) { ･････ })
注）イベント名（event_name）は何でも構いませんが、送信する側と受信する側でイベント名を一致させる必要があります！

socket.io.html（UTF-8で保存してください）

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Socket.IO</title>
</head>
<body>

<div>
  <input id="Input" type="text">
  <input type="button" value="送信" onclick="send();">
  <output id="Output"></output>
</div>

<script src="/socket.io/socket.io.js"></script>

<script>
const socket = io();

function send() {
  socket.emit("ClientMessage", document.getElementById("Input").value);
}

socket.on("ServerMessage", function (data) { document.getElementById("Output").innerHTML = data["message"]; });
</script>

</body>
</html>
　

 

socket.io.js

const webapp = require("express")();
const http = require("http").Server(webapp);
const io = require("socket.io")(http);

const port = 8080;
const host = "127.0.0.1";

webapp.get("/:file", (request, response) => response.sendFile("D:/webapp/public/" + request.params.file));
io.on("connection", (socket) => socket.on("ClientMessage", (data) => socket.emit("ServerMessage", {message:data})));
http.listen(port, host, console.log(`HTTP Server running at http://${host}:${port}/`));
　

 

〈ファイルの配置〉

D:\webapp\public\socket.io.html
D:\webapp\socket.io.js

 

♦ Webアプリケーションの起動

コマンドプロンプトから下記のように入力すると、Web サーバのアプリケーション（socket.io.js）を起動させることができます。

〈コマンドプロンプト（cmd.exe）〉

cd /d D:\webapp
node socket.io.js

Ctrl+C（強制終了）

 

♦ ブラウザからWebサーバにアクセス

Web アプリケーション（socket.io.js）が起動したら、ブラウザのアドレスバーに下記のように入力してください。


http://localhost:8080/socket.io.html

すると、次のような画面が表示されます。

文字列を入力し、送信ボタンをクリックして、入力した文字列が表示されたら成功です^^

 

参考サイト