Socket.IO Sample - Node.js

Sample 1

スケルトンは、Express Generator で作成しています。

bin/www

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('express-ws-ejs-o:server'); // +
var http = require('http');
const chat = require('../middleware/chat'); // +

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
chat(server); // +

... 中略 ...

middleware/chat.js

const { Server } = require('socket.io');

const chat = (server) => {
  const io = new Server(server);
  io.on('connection', (socket) => {
    socket.on('chat', (data) => {
      const [msg, room]  = data;
      if(room == ""){
        return;
      } else if(msg == "") {
        socket.join(room);
      } else {
        socket.join(room);
        io.to(room).emit('chat', msg);
      }
    });

    socket.on('exit', (data) => {
      const room  = data;
      const id = socket.id;
      socket.leave(room);
      io.to(id).emit('exit', "");
    });

    socket.on('change', (data) => {
      const [after, before]  = data;
      socket.leave(before);
      socket.join(after);
    })
  });
}

module.exports = chat;

javascripts/clientSocket.js

addEventListener('load', () => {
  const socket = io();

  const messages = document.getElementById('messages');
  const form = document.getElementById('form');
  const input = document.getElementById('input');
  const room = document.getElementById("room");
  const exit = document.getElementById('exit');
  
  room.addEventListener('focus', (e) => {
    let before_room = e.target.value;
    room.addEventListener('change', (e) => {
      e.preventDefault();
      let idx = room.selectedIndex;
      let seltxt = room.options[idx].value;
      socket.emit('change', [seltxt, before_room]);
      input.value = '';
    })
  })

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    let idx = room.selectedIndex;
    let seltxt = room.options[idx].value;
    if (input.value) {
      socket.emit('chat', [input.value, seltxt]);
      input.value = '';
    }
  });

  exit.addEventListener('click', (e) => {
    e.preventDefault();
    let idx = room.selectedIndex;
    let seltxt = room.options[idx].value;
    socket.emit('exit', seltxt);
  });

  socket.on('chat', (msg) => {
    const item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
  });

  socket.on('exit', (msg) => {
    let options = room.options;
    options[0].selected = true;
  });

  socket.on('change', (msg) => {});
});

routes/index.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index');
});

module.exports = router;

views/index.ejs

<head>
  <meta charset="UTF-8">
  <script src="/socket.io/socket.io.js"></script>
  <script src="/javascripts/clientSocket.js"></script>
  <title>Socket.IO chat</title>
</head>
<body>
  <form id="form" action="">
    <p>
      <select name="" id="room">
        <option value="">選択してください</option>
        <option value="room1">room1</option>
        <option value="room2">room2</option>
      </select>
    </p>
    <p><button type="button" id="exit">退出</button></p>
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>
  <ul id="messages"></ul>
  
</body>
</html>