WebScketのプロトコルとJavaScriptで
チャットをおこないたいのですが、
WebSocketやJavaScriptの知識が浅く、
処理がうまくいきません。
現状のソースコードを下記に示します。
javascript
1var webSocket; 2 window.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("messageArea"); 7 var appendMessage = function(value, color) { 8 var messageElement = document.createElement("div"); 9 messageElement.style.color = color; 10 messageElement.innerText = value; 11 messageArea.insertBefore(messageElement, messageArea.firstChild); 12 } 13 webSocket.onopen = function() { 14 appendMessage("Opened", "blue"); 15 } 16 webSocket.onclose = function() { 17 appendMessage("Closed", "red"); 18 } 19 webSocket.onmessage = function(message) { 20 var data = JSON.parse(message.data); 21 if ("message" == data.command) { 22 appendMessage(data.text, "black"); 23 } else if ("error" == data.command) { 24 appendMessage(data.text, "red"); 25 } 26 } 27 webSocket.onerror = function(message) { 28 appendMessage(message, "red"); 29 } 30 var messageInput = document.getElementById("messageInput"); 31 messageInput.onkeypress = function(e) { 32 if (13 == e.keyCode) { 33 var message = messageInput.value; 34 if (webSocket && "" != message) { 35 webSocket.send(message); 36 messageInput.value = ""; 37 } 38 } 39 } 40 } 41 function element(){ 42 var text ="よろしく"; 43 var e = document.getElementById('message-list'); 44 var elemLi = document.createElement('message-list'); // 要素を生成 45 elemLi.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + text + '</p></div></li>'; // 文字列設定 46 e.appendChild(elemLi); // 要素を追加 47 }
html
1<div class="message_box c-center__margin"> 2 <ul class="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-box"> 11 <p class="balloon_left">${ messagelist.message }</p> 12 <p class="time_recieve"> 13 <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/></p> 14 </div> 15 </li> 16 </c:if> 17 <c:if test="${ my }"> 18 <li class="msg_send"> 19 <div class="inner-box"> 20 <p class="balloon_right" id="messageArea">${ messagelist.message }</p> 21 <p class="time_send"> 22 <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/></p> 23 </div> 24 </li> 25 </c:if> 26 </c:forEach> 27 </ul> 28 </div> 29 <div class="message_inner_box c-center__margin"> 30 <div class="c-center message-area"> 31 <input type="text" id="messageInput" class="p-sendbox" name="sendarea" maxlength="1000" style="width:500px;height:100px;"> 32 <p>※<a href="">同意事項</a>に同意の上、送信してください。</p> 33 <a href="javascript:;" class="c-btn_chenge" onclick="element();"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a> 34 </div> 35 </div>
現状、テキストに文字を入力して、
Enterを押すと、<li class="msg_send">内には文字は表示されます。
しかし、<li class="msg_send">を新たに生成して、
そこにテキストで入力した文字を表示させたいので、
function element()を用いて入力した文字を表示させようと思っていたのですが、
うまく処理されません。
まずは、この部分をしっかりと表示させたいです。
何卒よろしくお願いいたします。
下記のコードの処理を行いたいのですが、
上記のコードだとうまくいかないので、
原因を知りたいです。
html
1<script> 2function element(){ 3var text = "こんばんは"; 4var e = document.getElementById('message-list'); 5var elemLi = document.createElement('message-list'); // 要素を生成 6elemLi.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + text + '</p></div></li>'; // 文字列設定 7e.appendChild(elemLi); // 要素を追加 8} 9 10</script> 11<title>Insert title here</title> 12</head> 13<body> 14<h1 id="header">DOM</h1> 15<ul id="message-list"> 16 <li class="msg_send"> 17 <div class="inner-box"> 18 <p class="balloon_right" id="messageArea">こんにちは</p> 19 </div> 20 </li> 21</ul> 22<a href="javascript:;" onclick="element()">ボタン</a> 23</body>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/31 23:12
2015/08/01 02:32