WebSocketとJavaScriptを用いて即時性のあるメッセージのやりとりをおこなう
プログラムを書いているのですが、
数カ所、動作がおかしいところがあるので、
ご享受いただければ幸いです。
下記の動作を行いたいです。
1.テキストエリアで入力したあと、テキストエリア内が初期化されずに続けての入力が不可(現在はテキストボックスで代用)
2.メッセージを表示する箇所を常に最新(スクロールの位置を一番下)に持って行きたい(現状はメッセージを送受信してもスクロールは動かずわざわざ下にスクロール)
3.送信ボタンを押すことでメッセージの送信を行えるようにする。(現状はテキストボックスで入力後、Enterを押すことで送信になっている)
調べ方が悪いのか検索しても解決策がわかりません。
よろしくお願いいたします。
下記に現状のJavaScriptとHTMLを記載いたします。
javascript
1<script type="text/javascript"> 2function sendMessage(){ 3 var message = messageInput.value; 4 if (webSocket && "" != message) { 5 webSocket.send(message); 6 messageInput.value = ""; 7 } 8 var webSocket; 9 window.onload = function() { 10 var forRtoA = document.createElement('a'); 11 forRtoA.href = "loadMessage"; 12 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 13 var messageArea = document.getElementById("message-list"); 14 var sessionid = document.getElementById("sessionID").value; 15 var photo = document.getElementById("yourphoto").value; 16 17 var appendMessage = function(value, session) { 18 var messageElement = document.createElement("messageArea"); 19 var time = new Date(); 20 var month = time.getMonth() + 1; 21 if(month < 10) { month = "0" + month; } 22 var day = time.getDate(); 23 if(day < 10) { day = "0" + day; } 24 var hour = time.getHours(); 25 if(hour < 10) { hour = "0" + hour; } 26 var minute = time.getMinutes(); 27 if(minute < 10) { minute = "0" + minute; } 28 var now = month + "/" + day + " " + hour + ":" + minute; 29 if(session == sessionid){ 30 messageElement.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + value + '</p></div></li><p class="time_send">' + now + '</p>'; 31 }else{ 32 messageElement.innerHTML = '<li class="msg_recieve"><a href="" target="_blank"><img src="' + photo + '" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"></a><div class="inner-box2"><p class="balloon_left">' + value + '</p></div></li><p class="time_recieve">' + now + '</p>'; 33 } 34 messageArea.appendChild(messageElement); 35 } 36 37 webSocket.onmessage = function(message) { 38 var data = JSON.parse(message.data); 39 appendMessage(data.text, data.sessionid); 40 } 41 } 42} 43</script>
html
1 <div class="message_box c-center__margin"> 2 <ul id="message-list"> 3 <c:forEach var="messagelist" items="${ requestScope.messageList }"> 4 <c:if test="${ messagelist.userid == myuserid }" var="my"/> 5 <c:if test="${ !my }"> 6 <li class="msg_recieve"> 7 <a href="" target="_blank"> 8 <img src="<c:out value='${ UserProfile.photo }'/>" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"> 9 </a> 10 <div class="inner-box2"> 11 <p class="balloon_left">${ messagelist.message }</p> 12 </div> 13 </li> 14 <p class="time_recieve"><time datetime="2015-07-11T11:11"> 15 <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/> 16 </time></p> 17 </c:if> 18 <c:if test="${ my }"> 19 <li class="msg_send"> 20 <div class="inner-box"> 21 <p class="balloon_right" id="messageArea">${ messagelist.message }</p> 22 </div> 23 </li> 24 <p class="time_send"> 25 <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/> 26 </p> 27 </c:if> 28 </c:forEach> 29 </ul> 30 </div> 31 <div class="message_inner_box c-center__margin"> 32 <div class="c-center message-area"> 33 <textarea id="messageInput" class="p-sendbox" name="sendarea"></textarea> 34 <p>※<a href="">同意事項</a>に同意の上、送信してください。</p> 35 <a href="javascript:;" class="c-btn_chenge" onClick="sendMessage();" id="messageInput"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a> 36 </div> 37 </div>
何か一つだけでもよろしいので、
教えていただけると幸いです。
よろしくお願いいたします。
追記
解決後
javascript
1<script type="text/javascript"> 2var webSocket; 3window.onload = function() { 4 var forRtoA = document.createElement('a'); 5 forRtoA.href = "loadMessage"; 6 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 7 var messageArea = document.getElementById("message-list"); 8 var sessionid = document.getElementById("sessionID").value; 9 var photo = document.getElementById("yourphoto").value; 10 11 var appendMessage = function(value, session) { 12 var string = value.replace("/\r\n|\n|\r/g", "<br>"); 13 var messageElement = document.createElement("messageArea"); 14 var time = new Date(); 15 var month = time.getMonth() + 1; 16 if(month < 10) { month = "0" + month; } 17 var day = time.getDate(); 18 if(day < 10) { day = "0" + day; } 19 var hour = time.getHours(); 20 if(hour < 10) { hour = "0" + hour; } 21 var minute = time.getMinutes(); 22 if(minute < 10) { minute = "0" + minute; } 23 var now = month + "/" + day + " " + hour + ":" + minute; 24 if(session == sessionid){ 25 messageElement.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + string + '</p></div></li><p class="time_send">' + now + '</p>'; 26 }else{ 27 messageElement.innerHTML = '<li class="msg_recieve"><a href="" target="_blank"><img src="' + photo + '" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"></a><div class="inner-box2"><p class="balloon_left">' + string + '</p></div></li><p class="time_recieve">' + now + '</p>'; 28 } 29 messageArea.appendChild(messageElement); 30 var message_box = document.getElementById("message_box"); 31 message_box.scrollTop = message_box.scrollHeight; 32 } 33 34 webSocket.onmessage = function(message) { 35 var data = JSON.parse(message.data); 36 appendMessage(data.text, data.sessionid); 37 } 38 39 var messageInput = document.getElementById("c-btn_chenge"); 40 var messageText = document.getElementById("messageInput"); 41 messageInput.onclick = function() { 42 var message = messageText.value; 43 if (webSocket && "" != message) { 44 webSocket.send(message); 45 messageText.value = ""; 46 } 47 } 48} 49</script>
html
1<div class="message_box c-center__margin" id="message_box"> 2 <ul id="message-list"> 3 <c:forEach var="messagelist" items="${ requestScope.messageList }"> 4 <c:if test="${ messagelist.userid == myuserid }" var="my"/> 5 <c:if test="${ !my }"> 6 <li class="msg_recieve"> 7 <a href="" target="_blank"> 8 <img src="<c:out value='${ UserProfile.photo }'/>" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"> 9 </a> 10 <div class="inner-box2"> 11 <p class="balloon_left">${ messagelist.message }</p> 12 </div> 13 </li> 14 <p class="time_recieve"><time datetime="2015-07-11T11:11"> 15 <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/> 16 </time></p> 17 </c:if> 18 <c:if test="${ my }"> 19 <li class="msg_send"> 20 <div class="inner-box"> 21 <p class="balloon_right" id="messageArea">${ messagelist.message }</p> 22 </div> 23 </li> 24 <p class="time_send"> 25 <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/> 26 </p> 27 </c:if> 28 </c:forEach> 29 </ul> 30 </div> 31 <div class="message_inner_box c-center__margin"> 32 <div class="c-center message-area"> 33 <textarea id="messageInput" class="p-sendbox" name="sendarea"></textarea> 34 <p>※<a href="">同意事項</a>に同意の上、送信してください。</p> 35 <a href="javascript:;" id="c-btn_chenge"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a> 36 </div> 37 </div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/03 06:31
2015/08/03 07:09
2015/08/03 07:21
2015/08/03 10:49
2015/08/03 12:27