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>