WebSocketを利用して
1対1でのメッセージのやりとりをおこなうプログラムを作っています。
しかし、
不具合がでていて解決策に困っているので、
お力添えよろしくお願いいたします。
何をおこないたいかと申しますと、
メッセージを受信した時にuseridが自分のものか相手のものかを判別して、
自分のuseridだった場合の表示の仕方と
相手のuseridだった場合の表示の仕方を変えていく処理をしたいです。
そのためにまずはonMessage()の時に自分のuseridをクライアント側にわからせるためのコードを知りたです。
問題となるJSPのソースコードを記載いたします。
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 32 <div class="message_inner_box c-center__margin"> 33 <div class="c-center message-area"> 34 <input type="text" id="messageInput" class="p-sendbox" name="sendarea" maxlength="1000" style="width:500px;height:100px;"> 35 <p>※<a href="">同意事項</a>に同意の上、送信してください。</p> 36 <a href="javascript:;" class="c-btn_chenge" onclick="window.onload();" id="messageInput"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a> 37 </div> 38 </div>
自分と相手のuseridで表示形式を変えようとしています。
そして、JavaScriptを下記に示します。
javascript
1 var 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("message-list"); 7 8 var appendMessage = function(value, color) { 9 var messageElement = document.createElement("messageArea"); 10 var time = new Date(); 11 var month = time.getMonth() + 1; 12 if(month < 10) { month = "0" + month; } 13 var day = time.getDate(); 14 if(day < 10) { day = "0" + day; } 15 var hour = time.getHours(); 16 if(hour < 10) { hour = "0" + hour; } 17 var minute = time.getMinutes(); 18 if(minute < 10) { minute = "0" + minute; } 19 var now = month + "/" + day + " " + hour + ":" + minute; 20 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>'; 21 messageArea.appendChild(messageElement); 22 } 23 24 webSocket.onmessage = function(message) { 25 var data = JSON.parse(message.data); 26 if ("message" == data.command) { 27 appendMessage(data.text, "black"); 28 } else if ("error" == data.command) { 29 appendMessage(data.text, "red"); 30 } 31 } 32 33 var messageInput = document.getElementById("messageInput"); 34 messageInput.onkeypress = function(e) { 35 if (13 == e.keyCode) { 36 var message = messageInput.value; 37 if (webSocket && "" != message) { 38 webSocket.send(message); 39 messageInput.value = ""; 40 } 41 } 42 } 43 }
最初は一人のユーザーだけのことしか考えておらず、
相手が入力した文章も自分が書いたような表示になってしまいます。
そして、肝心となるJavaのソースコードを下記に記します。
java
1//相手が誰かを紐付けするroomidを取得してそれを一時的にセッションに関連付けてデータベースに保存します 2ses.removeAttribute("roomid"); 3String sessionid = ses.getId(); 4int roomid = messagedao.selectRoomID(myuserid, youruserid).getRoomid(); 5ses.setAttribute("roomid", roomid); 6messagedao.deletSessionID(myuserid); 7messagedao.insertSessionID(sessionid, myuserid, roomid); 8 9//上記の処理を受けてセッションでもって、メッセージのやりとりを管理しています 10import java.io.IOException; 11import java.util.ArrayList; 12import java.util.List; 13 14import javax.servlet.ServletException; 15import javax.servlet.http.HttpSession; 16import javax.websocket.EndpointConfig; 17import javax.websocket.OnClose; 18import javax.websocket.OnError; 19import javax.websocket.OnMessage; 20import javax.websocket.OnOpen; 21import javax.websocket.Session; 22import javax.websocket.server.ServerEndpoint; 23 24import dao.MessageDao; 25 26@ServerEndpoint(value = "/loadMessage" , configurator = GetHttpSessionConfigurator.class) 27public class WebSocketEndpointAction{ 28 public static List<Session> sessions = new ArrayList<Session>(); 29 private HttpSession httpSession; 30 private String sessionid; 31 32 @OnOpen 33 public void onOpen(Session session , EndpointConfig config) { 34 // 開始時 35 sessions.add(session); 36 this.httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName()); 37 sessionid = httpSession.getId(); 38 } 39 40 41 @OnMessage 42 public void onMessage(String message , EndpointConfig config) throws IOException, ServletException { 43 // クライアントからの受信時 44 for (Session session : sessions) { 45 session.getBasicRemote().sendText("{\"command\":\"message\", \"text\": \"" + message.replace("\\", "\\\\").replace("\"", "\\\"") + "\"}"); 46 MessageDao messagedao = new MessageDao(); 47 try{ 48 messagedao.connect(); 49 int userid = messagedao.selectSessionID(sessionid).getUserid(); 50 int roomid = messagedao.selectSessionID(sessionid).getRoomid(); 51 messagedao.insertMessage(userid, roomid, message); 52 messagedao.close(); 53 }catch(Exception e){ 54 e.printStackTrace(); 55 } 56 } 57 } 58 59@OnError 60 public void onError(Throwable t) throws IOException { 61 // エラー発生時 62 for (Session session : sessions) { 63 session.getBasicRemote().sendText("{\"command\":\"error\", \"text\": \"" + t.getMessage().replace("\\", "\\\\").replace("\"", "\\\"") + "\"}"); 64 } 65 } 66 67 68 69 @OnClose 70 public void onClose(Session session) { 71 // 完了時 72 sessions.remove(session); 73 } 74}
何卒よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。