WebSocketでチャットをおこないたいが、表示のさせ方がおかしいです

Question

まずは、表示をどのようにしたいかお見せ致します。
![
最初の状態で、テキストに文字を入力して送信のボタンを押すと2段目のように、
ひとつのブロックに入力した文字が書かれてしまいます。
そうではなく、一番下のように
入力したら、別のブロックを生成して、更に時間も表示したいと考えております。

現状のコードを下記に記載致しますので、
ご教授お願い致します。

<script type="text/javascript">
	var webSocket;
	window.onload = function() {
		var forRtoA = document.createElement('a');
		forRtoA.href = "loadMessage";
		webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://"));
		var messageArea = document.getElementById("messageArea");
		
		var appendMessage = function(value, color) {
			var messageElement = document.createElement("div");
			messageElement.style.color = color;
			messageElement.innerText = value;
			messageArea.insertBefore(messageElement, messageArea.firstChild);
		}
		webSocket.onmessage = function(message) {
			var data = JSON.parse(message.data);
			if ("message" == data.command) {
				appendMessage(data.text, "black");
			} else if ("error" == data.command) {
				appendMessage(data.text, "red");
			}
		}
		webSocket.onerror = function(message) {
			appendMessage(message, "red");
		}
		var messageInput = document.getElementById("messageInput");
		messageInput.onkeypress = function(e) {
			if (13 == e.keyCode) {
				var message = messageInput.value;
				if (webSocket && "" != message) {
					webSocket.send(message);
					messageInput.value = "";
				}
			}
		}
	}
	
	function disp(){
		var date = new Date();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		var hours = date.Hours();
		var minutes = date.getMinutes();
		var time = month + "/" + day + " " + hours + ":" + minutes;
		document.getElementsByClassName("time_send").value= time;
	}
</script>

<c:forEach var="messagelist" items="${ requestScope.messageList }">
        	<ul class="message-list">
        	<c:if test="${ messagelist.userid == myuserid }" var="myuser"/>
        	<c:if test="${ !myuser }">
                <li class="msg_recieve">
                	<a href="" target="_blank">
            		<img src="<c:out value='${ UserProfile.photo }'/>" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini">
                    </a>
                    <div class="inner-box">
        			<p class="balloon_left"><c:out value="${ messagelist.message }"/></p>
                    <p class="time_recieve"><time datetime="2015-07-11T11:11">
                    	<fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd"/>
            			<fmt:formatDate value="${ messagelist.comment_time }" type="TIME" timeStyle="SHORT"/>
            			</time></p>
                    </div>
                </li>
             </c:if>
             <c:if test="${ myuser }">
                <li class="msg_send ">
                	<div class="inner-box">
       				  <p class="balloon_right" id="messageArea"><c:out value="${ messagelist.message }"/></p>
                    	<p class="time_send"><time datetime="2015-07-11T11:11">
                    	<fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd"/>
            			<fmt:formatDate value="${ messagelist.comment_time }" type="TIME" timeStyle="SHORT"/>
            			</time></p>
                    </div>
                </li>
             </c:if>
            </ul>
        </c:forEach>

また、相手が入力した文字も即座に表示できるようにしたいです。
よろしくお願い致します。

Answer 1

appendMessageでテキストをp要素に追加するのではなく、ul要素のliを追加するようにすれば、テキスト入力でブロックが追加できます。その時に現在時刻を取得するか、テキスト入力のタイミングで現在時刻も一緒にサーバーに送信、クライアントで受信すれば時刻も表示可能です。
http://akioblog.com/2013/03/10/868/

テキストだけでなく、時刻もサーバーに送受信するのはjson形式などで工夫してやってみてください。
http://hakuhin.jp/js/json.html

また、相手が入力した文字も即座に表示できるようにしたいです。

サーバーサイドのWebsocket処理でブロードキャスト送信するか、ルーム毎の管理などをしたい場合は、対象ルームの全ユーザーに送信するような処理が必要になります。

サーバーサイドの実装がどうなっているか？Webscoketの通信の仕組みやDOM操作などおそらく不明確な部分が結構あるのではないでしょうか？部分的に不明な部分を都度実装するのではなく、仕組みを把握されてから実装した方がいいと思います。