質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2596閲覧

【WebSocket】JavaとJavaScriptで相互でやりとりをおこないたい

Sfidante

総合スコア90

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2015/07/31 14:39

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}

何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

サーバーサイドのsession.getBasicRemote().sendTextにuseridを含めてやれば、クライアントサイドのJavascriptでuseridが自身のユーザーIDかどうか判定できると思います。

サーバーサイドのonMessageですべてのsessionに対して、ブロードキャスト送信していますが、自分以外で同じルームの場合、メッセージを送信するような処理にした方がいいかと。。
(自分が送信したメッセージを自分も受信するというのは無駄な通信になるので。)

投稿2015/08/02 00:38

chiku_

総合スコア1464

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問