Node.js+Express+ejsでチャットアプリを制作していますが、Socket.Ioを利用したリアルタイム通信がうまくいきません。
クライアント側にsocketio.emit、socketio.onを書けばいいとのかなとは思うのですが、どこに書けばいいのかわかりません。
よろしくおねがいします。
javascript
1//app.js 2 3io.on('connection', function (socket) { 4 //データの受信 5 socket.on('message', function (msg) { 6 console.log('message: ' + msg); 7 //クライアント全員に対して送信する 8 io.emit('message', msg); 9 }); 10});
次はメッセージとアイコンを表示する部分です。
相手のメッセージがreplies、自分のメッセージがsentです。
ejs
1<!--index.ejs--> 2 <div class="messages"> 3 <ul> 4 <!--自分のメッセージ--> 5 <li class="sent"> 6 <img src="http://emilcarlsson.se/assets/mikeross.png" alt="" /> 7 <p>How the hell am I supposed to get a jury to believe you when I am not even sure that I 8 do?!</p> 9 </li> 10 <!--相手のメッセージ--> 11 <li class="replies"> 12 <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" /> 13 <p>When you're backed against the wall, break the god damn thing down.</p> 14 </li> 15 </ul> 16 </div>
関数newMessage
メッセージを表示するだけですが、この部分はうまく動作しています.
おそらくこの部分に
socketio.emit(送信)
socketio.on(受信)
を記述すればいいと思うのですが、どこに書いてもうまくいきません。
ejs
1<!--index.ejs--> 2 3function newMessage() { 4 message = $(".message-input input").val(); 5 if ($.trim(message) == '') { 6 return false; 7 } 8 9<!--li class="sent"にメッセージを表示--> 10 $('<li class="sent"><img src="http://emilcarlsson.se/assets/mikeross.png" alt="" /><p>' + message + '</p></li>').appendTo($('.messages ul')); 11 $('.message-input input').val(null); 12 $('.contact.active .preview').html('<span>You: </span>' + message); 13 $(".messages").animate({ scrollTop: $(document).height() }, "fast"); 14 }; 15 16 <!--送信ボタンを押した時にnewMessageを呼び出す--> 17 18 $('.submit').click(function () { 19 newMessage(); 20 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/27 00:31