チャットのようなメッセージにやりとりに関して、
テキストエリアで改行入力をおこなっても、
JavaScriptで即時表示をおこなっているのですが、
表示がされません。
メッセージを送信と同時にMySQLへも保存しているのですが、
リロードしてみると、
改行したはずが、改行ではなく
スペースが入っての表示になってしまいます。
MySQLに関しては、改行された状態での挿入になっています。
入力された時と出力するときに
それぞれ処理が必要なのでしょうが、
調べてもPHPのコードしかなくよくわかりません。
ご教授よろしくお願いいたします。
下記にJavaScriptとHTMLのコードを記載いたします。
javascript
1var webSocket; 2window.onload = function() { 3 var forRtoA = document.createElement('a'); 4 forRtoA.href = "loadMessage"; 5 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 6 var messageArea = document.getElementById("message-list"); 7 var sessionid = document.getElementById("sessionID").value; 8 var photo = document.getElementById("yourphoto").value; 9 10 var appendMessage = function(value, session) { 11 var messageElement = document.createElement("messageArea"); 12 var time = new Date(); 13 var month = time.getMonth() + 1; 14 if(month < 10) { month = "0" + month; } 15 var day = time.getDate(); 16 if(day < 10) { day = "0" + day; } 17 var hour = time.getHours(); 18 if(hour < 10) { hour = "0" + hour; } 19 var minute = time.getMinutes(); 20 if(minute < 10) { minute = "0" + minute; } 21 var now = month + "/" + day + " " + hour + ":" + minute; 22 if(session == sessionid){ 23 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>'; 24 }else{ 25 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>'; 26 } 27 messageArea.appendChild(messageElement); 28 } 29 30 webSocket.onmessage = function(message) { 31 var data = JSON.parse(message.data); 32 appendMessage(data.text, data.sessionid); 33 } 34 35 var messageInput = document.getElementById("c-btn_chenge"); 36 var messageText = document.getElementById("messageInput"); 37 messageInput.onclick = function() { 38 var message = messageText.value; 39 if (webSocket && "" != message) { 40 webSocket.send(message); 41 messageText.value = ""; 42 } 43 } 44}
html
1<div class="message_inner_box c-center__margin"> 2 <div class="c-center message-area"> 3 <input type="text" id="messageInput" class="p-sendbox" name="sendarea"> 4 <p>※<a href="">同意事項</a>に同意の上、送信してください。</p> 5 <a href="javascript:;" id="c-btn_chenge"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a> 6 </div> 7 </div>
追記
改変後のコード
javascript
1var webSocket; 2window.onload = function() { 3 var forRtoA = document.createElement('a'); 4 forRtoA.href = "loadMessage"; 5 webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://")); 6 var messageArea = document.getElementById("message-list"); 7 var sessionid = document.getElementById("sessionID").value; 8 var photo = document.getElementById("yourphoto").value; 9 10 var appendMessage = function(value, session) { 11 var string = value.replace("/\r\n|\n|\r/g", "<br>"); 12 var messageElement = document.createElement("messageArea"); 13 var time = new Date(); 14 var month = time.getMonth() + 1; 15 if(month < 10) { month = "0" + month; } 16 var day = time.getDate(); 17 if(day < 10) { day = "0" + day; } 18 var hour = time.getHours(); 19 if(hour < 10) { hour = "0" + hour; } 20 var minute = time.getMinutes(); 21 if(minute < 10) { minute = "0" + minute; } 22 var now = month + "/" + day + " " + hour + ":" + minute; 23 if(session == sessionid){ 24 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>'; 25 }else{ 26 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>'; 27 } 28 messageArea.appendChild(messageElement); 29 var message_box = document.getElementById("message_box"); 30 message_box.scrollTop = message_box; 31 } 32 33 webSocket.onmessage = function(message) { 34 var data = JSON.parse(message.data); 35 appendMessage(data.text, data.sessionid); 36 } 37 38 var messageInput = document.getElementById("c-btn_chenge"); 39 var messageText = document.getElementById("messageInput"); 40 messageInput.onclick = function() { 41 var message = messageText.value; 42 if (webSocket && "" != message) { 43 webSocket.send(message); 44 messageText.value = ""; 45 } 46 } 47}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/03 02:53
2015/08/03 02:57
2015/08/03 03:00 編集
2015/08/03 06:18
2015/08/03 06:28
2015/08/03 06:36
2015/08/03 06:39
2015/08/03 06:58