【JavaScript】メッセージのやりとりの処理について

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件

ベストアンサー

僕自身もコードに問題はないとおもっていたのですが、どうもうまくいかずに困っていました

以下のテストコードを書いてみたのですが、きちんとクリアされるようです。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title>test</title>
5		<meta charset="utf-8" />
6		<script type="text/javascript">
7			function getAndClear(){
8				var txt = document.getElementById("tarea");
9				alert(txt.value);
10				txt.value="";
11			}
12		</script>
13	</head>
14	<body>
15		<textarea id="tarea"></textarea>
16		<button id="btn" onClick="getAndClear();">test</button>
17	</body>
18</html>

Chromeをお持ちでしたら、開発者ツールを起動させてみてもらえますか？
何かエラー出ていませんか？

最下部に持っていくやり方をお教えいただくことはできますでしょうか？

昨日は面倒な気がしていましたが、すみません、意外と簡単そうでした。

<div class="message_box c-center__margin">にIDを足して <div class="message_box c-center__margin" id="message_box">

appendMessage 関数の最後に、

javascript
1var message_box = document.getElementById("message_box");
2message_box .scrollTop = obj.message_box ;

を追加でいかがでしょう？

送信処理に関して上記のコードに変えてみて行ったのですが、どうもうまくいかなかったです。

すみません、処理全体を関数で囲うのではなく、送信処理のみを囲うという意味でした。
ただ、私のアドバイスも悪くて、
window.onload = function(){
に囲まれたスコープではonClickから参照できませんね。

以下でどうでしょう？

javascript
1<script type="text/javascript">
2var webSocket;
3    window.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 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">' + value + '</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">' + value + '</p></div></li><p class="time_recieve">' + now + '</p>';
27            }
28            messageArea.appendChild(messageElement);
29        }
30        
31         webSocket.onmessage = function(message) {
32                var data = JSON.parse(message.data);
33                appendMessage(data.text, data.sessionid);
34            }
35        //sendMessageをwindowスコープに定義
36        window.sendMessage = function(){
37          var messageInput = document.getElementById("messageInput");
38          var message = messageInput.value;
39          if (webSocket && "" != message) {
40              webSocket.send(message);
41              messageInput.value = "";
42           }
43        }
44    }
45</script>

投稿2015/08/03 03:24

TetsuyaZama

総合スコア216

Sfidante

2015/08/03 06:31

ご丁寧にご回答ありがとうございます。おかげさまですべての問題点を解決出来ました。ありがとうございます。一応解決後のコードを追記として載せておきました。また、もしわかれば教えていただきたいのですが、現状、テキストエリアを改行してしまいますと JavaScriptでの表示ができません。改行コードを記載しているのですが、それがうまく処理できていないようです。よろしくお願いいたします。

TetsuyaZama

2015/08/03 07:09

正規表現間違っていませんか？ value.replace("/[\r\n|\n|\r]/g", "<br />"); でいかがでしょう？

Sfidante

2015/08/03 07:21

ご回答ありがとうございます。そちらでおこなってもうまくいきませんでした。

TetsuyaZama

2015/08/03 10:49

調べたところ、<br />ではなく、を入れるみたいです。以下、他人様のブログですが。。。 http://blog2.elephantech.net/htmlcss/tml%EF%BC%9Atextarea%EF%BC%88%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AA%E3%82%A2%EF%BC%89%E3%81%AE%E4%B8%AD%E3%81%A7%E3%80%81%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E3%81%A7%E6%94%B9%E8%A1%8C/ 私も初めて知りました。勉強になりました。

Sfidante

2015/08/03 12:27

わざわざ調べてくださりありがとうございます。 でおこなってみたのですが、結果は変わらずでした。そして、下記のようにalert();で出力していったところ var appendMessage = function(value , session){ alert(value); var string = value.replace(/[\r\n|\n|\r]/g , ""); 改行した場合、この位置でもエラーになったので、 Java側（サーバー側）でうまく処理できていないのかなと考えております。

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

前提として、jQueryのようなライブラリを使ったほうが色々便利な気がしますが、とりあえず使わない前提でお答えします。

1.テキストエリアで入力したあと、テキストエリア内が初期化されずに続けての入力が不可（現在はテキストボックスで代用）

これについては、ソースを拝見した限り動きそうな気がしますが。。。
一瞬、valueではなくinnerHTMLやinnerTextを操作すべきかと疑いましたが、
ここによるとvalueで合っていそうですね。
ちなみにブラウザは何を使われていますか？

2.メッセージを表示する箇所を常に最新（スクロールの位置を一番下）に持って行きたい（現状はメッセージを送受信してもスクロールは動かずわざわざ下にスクロール）

スクロールさせるのはそこそこ大変なような気がするので、
メッセージを下に追加するのではなく、上に追加していく（つまり、一番上が最新）のではダメでしょうか？

であれば、

javascript
1messageArea.appendChild(messageElement);

の代わりに、

javascript
1messageArea.insertBefore(messageElement, messageArea.childNodes[0]);

でいかがでしょう？

3.送信ボタンを押すことでメッセージの送信を行えるようにする。（現状はテキストボックスで入力後、Enterを押すことで送信になっている）

送信処理を、

javascript
1function sendMessage(){
2                var message = messageInput.value;
3                if (webSocket && "" != message) {
4                    webSocket.send(message);
5                    messageInput.value = "";
6                }
7}

というように関数で囲って、

HTML
1<a href="javascript:;" class="c-btn_chenge" onClick="sendMessage();" id="messageInput">

のようにonClickで指定してあげればOKのはずです。
尚、onclickではなくonClickです。

投稿2015/08/02 13:53

TetsuyaZama

総合スコア216

Sfidante

2015/08/03 00:26

ご回答ありがとうございます。ご連絡が遅くなり、申し訳ございません。＞これについては、ソースを拝見した限り動きそうな気がしますが。。。＞一瞬、valueではなくinnerHTMLやinnerTextを操作すべきかと疑いましたが、＞ここによるとvalueで合っていそうですね。＞ちなみにブラウザは何を使われていますか？僕自身もコードに問題はないとおもっていたのですが、どうもうまくいかずに困っていました。ブラウザは、Chrome、firefox、safari、operaで確認しています。唯一IEでの確認はしていませんが、 IE以外はどれもうまくいっていません。＞スクロールさせるのはそこそこ大変なような気がするので、＞メッセージを下に追加するのではなく、上に追加していく＞（つまり、一番上が最新）のではダメでしょうか？ UI等を考えた時に、上に最新ですとよろしくないかと思っております。大変申し訳無いのですが、最下部に持っていくやり方をお教えいただくことはできますでしょうか？送信処理に関して上記のコードに変えてみて行ったのですが、どうもうまくいかなかったです。 JavaScriptに関する知識がない状態ですので、間違っている可能性がありますので、記載コードを改変した載せますので、ご確認いただいてもよろしいでしょうか？ onClick関数に関して、ご指摘ありがとうございます。どちらでもよいと思っておりました。

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

あなたの回答