socket.io で値をemitできない

##前提、実現したいこと
myFormのnameとmsgに入力した値を取得し、
チャットスペースに「ユーザーネーム」と「本文」として表示したいと考えています。

クライアントサイドのjavascriptから、nameとmsgの値を取得して、サーバーサイドにemit_from_clientイベントとして送信。
↓
サーバーサイドでは、emit_from_clientイベントで取得したnameをusers配列に保存。nameとmsgの値をemit_from_serverイベントでクライアントサイドに投げ返す。
↓
クライアントサイドで、emit_from_serverイベントから取得したnameとmsgを、DOM操作でHTMLに表示する

というのが、現在考えている実装の流れです。

##現在のコード
・ファイル構成

├── app.js  //サーバーサイドjavascript
├── index.html 
├── index.js //クライアントサイドjavascript
├── node_modules
├── package-lock.json
└── users.js //addUser関数

・app.js

javascript
1var app = require('http').createServer(handler),
2    io = require('socket.io').listen(app),
3    fs = require('fs');
4
5const {addUser} = require('./users.js')
6
7app.listen(1337, () => {
8  console.log('server is up on port 1337')
9});
10    
11function handler(req, res){
12  fs.readFile(__dirname + '/index.html', function(err, data){
13    if(err){
14      res.writeHead(500);
15      return res.end('Error');
16    }
17    res.writeHead(200);
18    res.write(data);
19    res.end();
20  })
21}
22
23
24io.sockets.on('connection', function(socket){
25
26    socket.on('emit_from_client', ({username, msg}) => {
27      const user = addUser(socket.id, username)
28
29      console.log(user.username + msg)
30
31      io.sockets.emit('emit_from_server', {
32        username: username,
33        msg: msg
34      })
35    });
36})
37

・users.js

javascript
1const users = []
2
3const addUser = ({id, username}) => {
4  if(!id || !username){
5    return{
6      error: `Username and Rooms are required`
7    }
8  }
9
10  const user = {id, username}
11  users.push(user)
12  return {user}
13}
14
15module.exports = {
16  addUser
17}

・index.js

javascript
1var socket = io();
2
3const $myForm = document.querySelector('#myForm')
4
5socket.on('connection', (socket) => {
6  console.log('new websocket connection')
7
8  $myForm.submit(function(e){
9    e.preventDefault();
10
11    socket.emit('emit_from_client', {
12      username: document.querySelector('#name').value,
13      msg: document.querySelector('#msg').value
14      })
15    console.log({username, msg}) //HTMLに入力されたname,msgがemitされているならここでターミナルに表示されるはず
16  })
17
18    socket.on('emit_from_server', (data) => {
19      const $logs = document.querySelector('#logs')
20      const username = data.username
21      const msg = data.msg
22      
23      console.log(username, msg)
24
25      $logs.append('<li>').text(`[${username} ]${msg}`)
26    })
27  })

・index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <script src="index.js"></script>
6  <title>Socket.ioの練習</title>
7</head>
8<body>
9  <form id="myForm">
10    <input type="text" id="name">
11    <input type="text" id="msg">
12    <input type="submit" value="送信">
13  </form>
14  <li id="logs"></li>
15  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16  <script src="/socket.io/socket.io.js"></script>
17
18
19</body>
20</html>