Socket.IOのチュートリアルをjavascriptだけで書き直すとエラー

環境

vagrant centOS6
nodejs v0.12.8
socket.IO v1.3.7
express v4.13.3
nodemon v1.8.1

nodejsでsocket.IOを使っているのですが、socket.IO公式のチュートリアルに書いてあるサンプルをjavascriptだけで書き直したいと思ったのですが、うまくいかないので教えてください。

app.js
1// app.js
2// javascript特にフロント側の質問の為、変更以外割愛
3// クライアントからformデータ受け取り
4socket.on('chat message', function(msg){
5  console.log(msg);
6  io.emit('chat message', msg);
7});

index
1// HTML
2<ul id="messages"></ul>
3<form id="sendFrm" action="">
4<input id="sendInp" type="text" autocomplete="off" /><button id="sendBtn">Send</button>
5</form>

script
1// script
2document.addEventListener('DOMContentLoaded', function (event) {
3  var addElem = document.querySelector('#messages');
4  var sendFrm = document.querySelector('#sendFrm');
5  var sendBtn = document.querySelector('#sendBtn');
6  var sendInp = document.getElementById('sendInp');
7  sendBtn.addEventListener('click', sendMessage, false)
8});
9var socket = io();
10function sendMessage(){ 
11  socket.emit('chat message', sendInp.value);
12  sendInp.value = "";
13  return false;
14});
15socket.on('chat message', function(msg){
16  var ele = document.createElement('li');
17  var str = document.createTextNode(msg);
18  ele.appendChild(str);
19  addElem.appendChild(ele);
20});

実行結果ですが、
addEventListenerしているfunctionの中でsocket.emitしていますが、ターミナルではサーバがクライアントから受け取ったメッセージをconsole表示しています。

にもかかわらず、クライアント側でappendChildしてくれません。
サーバ側とクライアント側でイベント名も間違っていないのに、クライアントがサーバから受け取ったメッセージを表示してくれません。

正しいコードを教えて下さい。よろしくお願いたします。

行動規範の内容に同意します

回答1件

ベストアンサー

単純に、考えてみましょう。
変数addElemに対するスコープの問題ではなかろうかと思います。

javascript
1document.addEventListener('DOMContentLoaded', function (event) {
2  var addElem = document.querySelector('#messages');
3  var sendFrm = document.querySelector('#sendFrm');
4  var sendBtn = document.querySelector('#sendBtn');
5  var sendInp = document.getElementById('sendInp');
6  sendBtn.addEventListener('click', sendMessage, false);
7// }); コメントアウト
8  var socket = io();
9  function sendMessage(){ 
10    socket.emit('chat message', sendInp.value);
11    sendInp.value = "";
12    return false;
13  });
14  socket.on('chat message', function(msg){
15    var ele = document.createElement('li');
16    var str = document.createTextNode(msg);
17    ele.appendChild(str);
18    addElem.appendChild(ele);
19  });
20}); // 追加