NEW ARTICLE
mac ファイルから指定した範囲の行を抽出する
  1. HOME
  2. express
  3. Node.js Expressを使ってリアルタイム通信を可能にするSocket.IOの使い方

Node.js Expressを使ってリアルタイム通信を可能にするSocket.IOの使い方

Node.js Expressを使ってリアルタイム通信を可能にするSocket.IOの使い方

簡単にリアルタイム通信が実装できるsocket.ioをインストールして、簡易的なチャット風アプリの作成手順

目次

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0
  • express 4.17.1
  • socket.io 2.3.0

プロジェクト作成

適当なディレクトリを作成します

mkdir socket-project
cd socket-project

モジュールをインストールします

npm init -y
npm i -S express socket.io

Socket.IO使い方

socket-project配下にindex.jsを下記の内容で編集します

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const PORT = process.env.PORT || 3000;
 
app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});
 
io.on('connection', function (socket) {
  socket.on('send message', function (msg) {
    io.emit('new message', msg);
  });
});
 
http.listen(PORT, function () {
  console.log('server start');
});

socket-project配下にindex.htmlを下記の内容で編集します

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container" style="margin-top:50px;">
        <div class="form-group">
            <form>
                <input type="text" id="msg" class="form-control" />
                <button class="btn btn-primary">送信</button>
            </form>
        </div>    
        <ul id="messages" class="list-group list-group-flush"></ul>
    </div>

    <script>
        const socket = io();

        $(function () {            
 
            $('form').submit(function () {
                socket.emit('send message', $('#msg').val());
                $('#msg').val('');
                return false;
            });
 
            socket.on('new message', function (msg) {
                $('#messages').append($('<li class="list-group-item">').text(msg));
            });
        });
    </script>
 
</body>
 
</html>

起動します。

node index.js

ブラウザから http://プライベートIP:3000 にアクセスすると、チャット風な動作が確認できます。