Socket.IOを使用して、サーバーからブラウザへデータを送信する

at_ito

2019年12月1日 17時10分

Webアプリケーションを作成していると、クライアントからのアクセスにレスポンスするだけでなく、クライアントからのリクエストがなくてもサーバーからデータを送りたい場合があるかと思います。

そのため、ここではSocket.IOを使ってサーバーからクライアントに5秒間隔でテキストを送るアプリケーションを作成してみます。

1. 環境

製品: Armadillo-X1
Linuxカーネル: 4.9-at12
ユーザーランド: Debian GNU/Linux 9.0(stretch)
nodeバージョン: v12.13.1
npmバージョン: 6.12.1

2. Node.jsのインストール

以下のブログを参考にNode.jsをArmadillo-X1にインストールしてください。

https://users.atmark-techno.com/blog/8700/3720

3. 環境設定

以下のコマンドを実行し、アプリケーションに必要な環境を構築してください。

[armadillo ~]# mkdir socketio-simple
[armadillo ^}# cd socketio-simple
[armadillo ^/socketio-simple}# npm init -y
[armadillo ^/socketio-simple}# npm i -S express node-cron socket.io

4. ソースファイルの作成

以下のようにindex.jsファイルを作成してください。

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const cron = require('node-cron');

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

cron.schedule('*/5 * * * * *', () => {
  console.log('send hello.');
  io.emit('message', 'hello');
});

以下のようにindex.htmlファイルを作成してください。

<!doctype html>
<html>
  <head>
    <title>receive messages.</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $( () => {
        const socket = io();
        socket.on('message', (msg) => {
          $('#messages').append($('<li>').text(msg));
        });
      });
    </script>
  </body>
</html>

5. 実行

以下のコマンドを実行し、サーバーを起動させてください。

[armadillo ^/socketio-simple}# node index.js

上記実行後、PCでブラウザを立ち上げて「http://[armadilloのIPアドレス]:3000/」にアクセスしてください。

特に問題なければ、5秒間隔で「hello」という文字が追加されていきます。

参考ソースコード

今回作成したソースコードは、以下のURLからダウンロード可能です。

https://users.atmark-techno.com/system/files/blogs/socketio-simple.tar.gz

ブログ