chat

Socket.ioによるチャットアプリを作成しています。クライアントからメッセージを送信した所、サーバ側に複数受信されてしまいます。また、ブラウザをリロードするとリロードした分、サーバ側が受信するメッセージ数が増えてしまいます。どのように制御したら良いかわからず、お教え頂けないでしょうか。 ```js // Chatサーバ // S01.必要なモジュールを読み込む var socketio = require('socket.io'); var io; // S02.server.jsを読み込み exports.listen = function(server) { // S03.WebSocketの有効化 io = socketio.listen(server); io.sockets.on('connection', function(Socket) { console.log("WebSocket接続"); // S04.Connectionイベントを受信する io.sockets.on('connection', function(socket) { var room = ''; var name = ''; // roomへの入室は「Socket.join(room名)」 socket.on('client_to_server_join', function(selectRoom) { console.log("クライアントから受信したルーム名：", selectRoom); room = selectRoom; socket.join(room); }); // S05.client_to_serverイベントのデータを受信する socket.on('client_to_server', function(name, message) { console.log("クライアントから受信データの中身(部屋)：", name, message); // S06.server_to_clientイベント・データを送信する socket.broadcast.to(room).emit('server_to_client', name, message); }); // S07.client_to_server_broadcastイベント・データを受信し、送信元以外に送信する socket.on('client_to_server_broadcast', function(entryMessage) { console.log("クライアントから全体送信：", entryMessage); socket.broadcast.to(room).emit('server_to_client', entryMessage); }); // S08.client_to_server_personalイベント・データを受信し、送信元のみに送信する socket.on('client_to_server_personal', function(data) { console.log("クライアントから受信データの中身(個人)", data); var id = socket.id; name = data; var joinMessage = name + "さんが入室しました。" io.to(id).emit('server_to_client', { value: joinMessage }); }); // S09.dicconnectイベントを受信し、退出メッセージを送信する socket.on('disconnect', function() { if (name == '') { console.log("未入室のまま、退出しました。"); } else { var endMessage = name + "さんが退出しました。" io.to(room).emit('server_to_client', { value: endMessage }); } }) }); }); }; ``` ```js // Chatクライアント // C02.ソケットへ接続 var socket = io.connect('http://localhost:3000'); var isEnter = false; var name = ''; // チャットメッセージの書き込み function clientChatMessage(name, message) { var name_value = $("#name").val(); if (name == name_value) { var messageElement = $("

" + name + "

" + message + "

"); // クライアントからメッセージの送信 console.log("サーバへ送信する内容名前：", name + " メッセージ：" + message); socket.emit('client_to_server', name, message); } else { var messageElement = $("

" + name + "

" + message + "

"); } // チャットボードに書き込み $('#messages').append(messageElement); $('#messages').scrollTop($('#messages').prop('scrollHeight')); $('#send-message').val(''); } $(document).ready(function() { // var chatApp = new Chat(socket); var selectRoom = $("#rooms").val(); var name = $("#name").val(); console.log("roomid: " + selectRoom); console.log("name: " + name); // roomへ入室する var entryMessage = name + "さんが入室しました。"; socket.emit('client_to_server_join', selectRoom); console.log("ルーム情報を配信: " + selectRoom); // client_to_server_broadcastイベント・データを送信する socket.emit('client_to_server_broadcast', entryMessage); console.log("ルーム内に全体送信:", entryMessage); // client_to_server_personalイベント・データを送信する socket.emit('client_to_server_personal', name); console.log("ルーム内に送信:", name); // C04.server_to_clientイベント・データを受信する socket.on('server_to_client', function(name, message) { console.log("サーバから受信したデータ:", name, message); clientChatMessage(name, message); }); $("#send-message").focus(); // 「送信」ボタンをクリック $('#send-button').click(function() { // フォームに入力したメッセージを取得 var message = $('#send-message').val(); clientChatMessage(name, message); }); }); ``` ```html <--! チャットクライアントhtml id="name"のvalueで接続ユーザを切り替えています。 --> chat

チャットサンプルクライアント

コード ```

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

質問編集履歴