【Socket.io】クライアントから送信したメッセージがサーバ側に複数受信される

Socket.ioによるチャットアプリを作成しています。
クライアントからメッセージを送信した所、サーバ側に複数受信されてしまいます。
また、ブラウザをリロードするとリロードした分、サーバ側が受信するメッセージ数が増えてしまいます。

どのように制御したら良いかわからず、お教え頂けないでしょうか。

js
1// Chatサーバ
2// S01.必要なモジュールを読み込む
3var socketio = require('socket.io');
4var io;
5
6// S02.server.jsを読み込み
7exports.listen = function(server) {
8    // S03.WebSocketの有効化
9    io = socketio.listen(server);
10    io.sockets.on('connection', function(Socket) {
11        console.log("WebSocket接続");
12
13        // S04.Connectionイベントを受信する
14        io.sockets.on('connection', function(socket) {
15            var room = '';
16            var name = '';
17
18            // roomへの入室は「Socket.join(room名)」
19            socket.on('client_to_server_join', function(selectRoom) {
20                console.log("クライアントから受信したルーム名：", selectRoom);
21                room = selectRoom;
22                socket.join(room);
23            });
24
25            // S05.client_to_serverイベントのデータを受信する
26            socket.on('client_to_server', function(name, message) {
27                console.log("クライアントから受信データの中身(部屋)：", name, message);
28                // S06.server_to_clientイベント・データを送信する
29                socket.broadcast.to(room).emit('server_to_client', name, message);
30            });
31            // S07.client_to_server_broadcastイベント・データを受信し、送信元以外に送信する
32            socket.on('client_to_server_broadcast', function(entryMessage) {
33                console.log("クライアントから全体送信：", entryMessage);
34                socket.broadcast.to(room).emit('server_to_client', entryMessage);
35            });
36            // S08.client_to_server_personalイベント・データを受信し、送信元のみに送信する
37            socket.on('client_to_server_personal', function(data) {
38                console.log("クライアントから受信データの中身(個人)", data);
39                var id = socket.id;
40                name = data;
41                var joinMessage = name + "さんが入室しました。"
42                io.to(id).emit('server_to_client', { value: joinMessage });
43            });
44            // S09.dicconnectイベントを受信し、退出メッセージを送信する
45            socket.on('disconnect', function() {
46                if (name == '') {
47                    console.log("未入室のまま、退出しました。");
48                } else {
49                    var endMessage = name + "さんが退出しました。"
50                    io.to(room).emit('server_to_client', { value: endMessage });
51                }
52            })
53        });
54    });
55};

js
1// Chatクライアント
2// C02.ソケットへ接続
3var socket = io.connect('http://localhost:3000');
4var isEnter = false;
5var name = '';
6
7// チャットメッセージの書き込み
8function clientChatMessage(name, message) {
9    var name_value = $("#name").val();
10    if (name == name_value) {
11        var messageElement = $("<il><p class='sender_name me'>" + name + "</p><p class='right_balloon'>" + message + "</p><p class='clear_balloon'></p></il>");
12
13        // クライアントからメッセージの送信
14        console.log("サーバへ送信する内容 名前：", name + " メッセージ：" + message);
15        socket.emit('client_to_server', name, message);
16
17    } else {
18        var messageElement = $("<il><p class='sender_name'>" + name + "</p><p class='left_balloon'>" + message + "</p><p class='clear_balloon'></p></il>");
19    }
20
21    // チャットボードに書き込み
22    $('#messages').append(messageElement);
23    $('#messages').scrollTop($('#messages').prop('scrollHeight'));
24    $('#send-message').val('');
25}
26
27$(document).ready(function() {
28    // var chatApp = new Chat(socket);
29    var selectRoom = $("#rooms").val();
30    var name = $("#name").val();
31    console.log("roomid: " + selectRoom);
32    console.log("name: " + name);
33
34    // roomへ入室する
35    var entryMessage = name + "さんが入室しました。";
36    socket.emit('client_to_server_join', selectRoom);
37    console.log("ルーム情報を配信: " + selectRoom);
38
39    // client_to_server_broadcastイベント・データを送信する
40    socket.emit('client_to_server_broadcast', entryMessage);
41    console.log("ルーム内に全体送信:", entryMessage);
42
43    // client_to_server_personalイベント・データを送信する
44    socket.emit('client_to_server_personal', name);
45    console.log("ルーム内に送信:", name);
46
47    // C04.server_to_clientイベント・ データを受信する
48    socket.on('server_to_client', function(name, message) {
49        console.log("サーバから受信したデータ:", name, message);
50        clientChatMessage(name, message);
51    });
52
53    $("#send-message").focus();
54    // 「送信」ボタンをクリック
55    $('#send-button').click(function() {
56        // フォームに入力したメッセージを取得
57        var message = $('#send-message').val();
58        clientChatMessage(name, message);
59    });
60});

html
1<--!
2チャットクライアントhtml
3id="name"のvalueで接続ユーザを切り替えています。
4-->
5
6<!DOCTYPE html>
7<html lang="en">
8
9<head>
10    <meta charset="UTF-8">
11    <title>chat</title>
12    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
13    <link rel="stylesheet" type="text/css" href="css/chatStyle.css">
14    <script src="/socket.io/socket.io.js" type="text/javascript"></script>
15    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
16    <script src="js/chat.js" type="text/javascript"></script>
17    <script src="js/chat_ui_client2.js" type="text/javascript"></script>
18</head>
19
20<body>
21    <div class="panel-default">
22        <div class="panel-heading">
23            <p>チャットサンプル クライアント</p>
24        </div>
25        <div id='room'></div>
26        <div id="scroller" class="panel-body">
27            <ul id='messages'></ul>
28        </div>
29        <form id="send-form">
30            <div class="form-group">
31                <label>メッセージ</label>
32                <input class="span11" id="send-message" type="text" placeholder="メッセージ内容を入力してください。">
33                <button class="btn btn-primary" id="send-button" type="button">送信</button>
34                <select class="form-control" id="rooms">
35                        <option value="room01">部屋01</option>
36                    </select>
37                <select class="form-control" id="name">
38                            <option value="山田 太郎">山田 太郎</option>
39                        </select>
40            </div>
41        </form>
42    </div>
43</body>
44
45</html>
46コード

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

回答1件

自己解決

Chatサーバ側にソケットを2回記述している事が原因でした。

js
1// S02.server.jsを読み込み
2exports.listen = function(server) {
3    // S03.WebSocketの有効化
4    io = socketio.listen(server);
5    io.sockets.on('connection', function(Socket) {
6        console.log("WebSocket接続");
7
8        // S04.Connectionイベントを受信する
9        io.sockets.on('connection', function(socket) {
10            var room = '';
11            var name = '';
12
13

↓正しくは

js
1// S02.server.jsを読み込み
2exports.listen = function(server) {
3    // S03.WebSocketの有効化
4    io = socketio.listen(server);
5//    io.sockets.on('connection', function(Socket) { ←が不要
6        console.log("WebSocket接続");
7
8        // S04.Connectionイベントを受信する
9        io.sockets.on('connection', function(socket) {
10            var room = '';
11            var name = '';
12