teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【JavaScript】メッセージのやりとりの処理について

編集履歴

質問編集履歴

2

コード追記

2015/08/03 06:29

投稿

Sfidante
Sfidante

スコア90

test CHANGED
File without changes
test CHANGED
@@ -205,3 +205,193 @@
205
205
  教えていただけると幸いです。
206
206
 
207
207
  よろしくお願いいたします。
208
+
209
+
210
+
211
+ ---
212
+
213
+ 追記
214
+
215
+
216
+
217
+ 解決後
218
+
219
+ ```javascript
220
+
221
+ <script type="text/javascript">
222
+
223
+ var webSocket;
224
+
225
+ window.onload = function() {
226
+
227
+ var forRtoA = document.createElement('a');
228
+
229
+ forRtoA.href = "loadMessage";
230
+
231
+ webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://"));
232
+
233
+ var messageArea = document.getElementById("message-list");
234
+
235
+ var sessionid = document.getElementById("sessionID").value;
236
+
237
+ var photo = document.getElementById("yourphoto").value;
238
+
239
+
240
+
241
+ var appendMessage = function(value, session) {
242
+
243
+ var string = value.replace("/\r\n|\n|\r/g", "<br>");
244
+
245
+ var messageElement = document.createElement("messageArea");
246
+
247
+ var time = new Date();
248
+
249
+ var month = time.getMonth() + 1;
250
+
251
+ if(month < 10) { month = "0" + month; }
252
+
253
+ var day = time.getDate();
254
+
255
+ if(day < 10) { day = "0" + day; }
256
+
257
+ var hour = time.getHours();
258
+
259
+ if(hour < 10) { hour = "0" + hour; }
260
+
261
+ var minute = time.getMinutes();
262
+
263
+ if(minute < 10) { minute = "0" + minute; }
264
+
265
+ var now = month + "/" + day + " " + hour + ":" + minute;
266
+
267
+ if(session == sessionid){
268
+
269
+ 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>';
270
+
271
+ }else{
272
+
273
+ 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>';
274
+
275
+ }
276
+
277
+ messageArea.appendChild(messageElement);
278
+
279
+ var message_box = document.getElementById("message_box");
280
+
281
+ message_box.scrollTop = message_box.scrollHeight;
282
+
283
+ }
284
+
285
+
286
+
287
+ webSocket.onmessage = function(message) {
288
+
289
+ var data = JSON.parse(message.data);
290
+
291
+ appendMessage(data.text, data.sessionid);
292
+
293
+ }
294
+
295
+
296
+
297
+ var messageInput = document.getElementById("c-btn_chenge");
298
+
299
+ var messageText = document.getElementById("messageInput");
300
+
301
+ messageInput.onclick = function() {
302
+
303
+ var message = messageText.value;
304
+
305
+ if (webSocket && "" != message) {
306
+
307
+ webSocket.send(message);
308
+
309
+ messageText.value = "";
310
+
311
+ }
312
+
313
+ }
314
+
315
+ }
316
+
317
+ </script>
318
+
319
+ ```
320
+
321
+ ```html
322
+
323
+ <div class="message_box c-center__margin" id="message_box">
324
+
325
+ <ul id="message-list">
326
+
327
+ <c:forEach var="messagelist" items="${ requestScope.messageList }">
328
+
329
+ <c:if test="${ messagelist.userid == myuserid }" var="my"/>
330
+
331
+ <c:if test="${ !my }">
332
+
333
+ <li class="msg_recieve">
334
+
335
+ <a href="" target="_blank">
336
+
337
+ <img src="<c:out value='${ UserProfile.photo }'/>" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini">
338
+
339
+ </a>
340
+
341
+ <div class="inner-box2">
342
+
343
+ <p class="balloon_left">${ messagelist.message }</p>
344
+
345
+ </div>
346
+
347
+ </li>
348
+
349
+ <p class="time_recieve"><time datetime="2015-07-11T11:11">
350
+
351
+ <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/>
352
+
353
+ </time></p>
354
+
355
+ </c:if>
356
+
357
+ <c:if test="${ my }">
358
+
359
+ <li class="msg_send">
360
+
361
+ <div class="inner-box">
362
+
363
+ <p class="balloon_right" id="messageArea">${ messagelist.message }</p>
364
+
365
+ </div>
366
+
367
+ </li>
368
+
369
+ <p class="time_send">
370
+
371
+ <fmt:formatDate value="${ messagelist.comment_time }" pattern="MM/dd HH:mm"/>
372
+
373
+ </p>
374
+
375
+ </c:if>
376
+
377
+ </c:forEach>
378
+
379
+ </ul>
380
+
381
+ </div>
382
+
383
+ <div class="message_inner_box c-center__margin">
384
+
385
+ <div class="c-center message-area">
386
+
387
+ <textarea id="messageInput" class="p-sendbox" name="sendarea"></textarea>
388
+
389
+ <p>※<a href="">同意事項</a>に同意の上、送信してください。</p>
390
+
391
+ <a href="javascript:;" id="c-btn_chenge"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a>
392
+
393
+ </div>
394
+
395
+ </div>
396
+
397
+ ```

1

質問改変

2015/08/03 06:29

投稿

Sfidante
Sfidante

スコア90

test CHANGED
File without changes
test CHANGED
@@ -36,95 +36,87 @@
36
36
 
37
37
  <script type="text/javascript">
38
38
 
39
- var webSocket;
40
-
41
- window.onload = function() {
42
-
43
- var forRtoA = document.createElement('a');
44
-
45
- forRtoA.href = "loadMessage";
46
-
47
- webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://"));
48
-
49
- var messageArea = document.getElementById("message-list");
50
-
51
- var sessionid = document.getElementById("sessionID").value;
52
-
53
- var photo = document.getElementById("yourphoto").value;
54
-
55
-
56
-
57
- var appendMessage = function(value, session) {
58
-
59
- var messageElement = document.createElement("messageArea");
60
-
61
- var time = new Date();
62
-
63
- var month = time.getMonth() + 1;
64
-
65
- if(month < 10) { month = "0" + month; }
66
-
67
- var day = time.getDate();
68
-
69
- if(day < 10) { day = "0" + day; }
70
-
71
- var hour = time.getHours();
72
-
73
- if(hour < 10) { hour = "0" + hour; }
74
-
75
- var minute = time.getMinutes();
76
-
77
- if(minute < 10) { minute = "0" + minute; }
78
-
79
- var now = month + "/" + day + " " + hour + ":" + minute;
80
-
81
- if(session == sessionid){
82
-
83
- 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>';
84
-
85
- }else{
86
-
87
- 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>';
88
-
89
- }
90
-
91
- messageArea.appendChild(messageElement);
92
-
93
- }
94
-
95
-
96
-
97
- webSocket.onmessage = function(message) {
98
-
99
- var data = JSON.parse(message.data);
100
-
101
- appendMessage(data.text, data.sessionid);
102
-
103
- }
104
-
105
-
106
-
107
- var messageInput = document.getElementById("messageInput");
108
-
109
- messageInput.onkeypress = function(e) {
110
-
111
- if (13 == e.keyCode) {
112
-
113
- var message = messageInput.value;
114
-
115
- if (webSocket && "" != message) {
116
-
117
- webSocket.send(message);
118
-
119
- messageInput.value = "";
120
-
121
- }
122
-
123
- }
124
-
125
- }
126
-
127
- }
39
+ function sendMessage(){
40
+
41
+ var message = messageInput.value;
42
+
43
+ if (webSocket && "" != message) {
44
+
45
+ webSocket.send(message);
46
+
47
+ messageInput.value = "";
48
+
49
+ }
50
+
51
+ var webSocket;
52
+
53
+ window.onload = function() {
54
+
55
+ var forRtoA = document.createElement('a');
56
+
57
+ forRtoA.href = "loadMessage";
58
+
59
+ webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://"));
60
+
61
+ var messageArea = document.getElementById("message-list");
62
+
63
+ var sessionid = document.getElementById("sessionID").value;
64
+
65
+ var photo = document.getElementById("yourphoto").value;
66
+
67
+
68
+
69
+ var appendMessage = function(value, session) {
70
+
71
+ var messageElement = document.createElement("messageArea");
72
+
73
+ var time = new Date();
74
+
75
+ var month = time.getMonth() + 1;
76
+
77
+ if(month < 10) { month = "0" + month; }
78
+
79
+ var day = time.getDate();
80
+
81
+ if(day < 10) { day = "0" + day; }
82
+
83
+ var hour = time.getHours();
84
+
85
+ if(hour < 10) { hour = "0" + hour; }
86
+
87
+ var minute = time.getMinutes();
88
+
89
+ if(minute < 10) { minute = "0" + minute; }
90
+
91
+ var now = month + "/" + day + " " + hour + ":" + minute;
92
+
93
+ if(session == sessionid){
94
+
95
+ 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>';
96
+
97
+ }else{
98
+
99
+ 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>';
100
+
101
+ }
102
+
103
+ messageArea.appendChild(messageElement);
104
+
105
+ }
106
+
107
+
108
+
109
+ webSocket.onmessage = function(message) {
110
+
111
+ var data = JSON.parse(message.data);
112
+
113
+ appendMessage(data.text, data.sessionid);
114
+
115
+ }
116
+
117
+ }
118
+
119
+ }
128
120
 
129
121
  </script>
130
122
 
@@ -134,7 +126,7 @@
134
126
 
135
127
  <div class="message_box c-center__margin">
136
128
 
137
- <ul id="message-list">
129
+ <ul id="message-list">
138
130
 
139
131
  <c:forEach var="messagelist" items="${ requestScope.messageList }">
140
132
 
@@ -192,17 +184,15 @@
192
184
 
193
185
  </div>
194
186
 
195
-
196
-
197
- <div class="message_inner_box c-center__margin">
187
+ <div class="message_inner_box c-center__margin">
198
188
 
199
189
  <div class="c-center message-area">
200
190
 
201
- <input type="text" id="messageInput" class="p-sendbox" name="sendarea" maxlength="1000" style="width:500px;height:100px;,valign:top;">
191
+ <textarea id="messageInput" class="p-sendbox" name="sendarea"></textarea>
202
192
 
203
193
  <p>※<a href="">同意事項</a>に同意の上、送信してください。</p>
204
194
 
205
- <a href="javascript:;" class="c-btn_chenge" onclick="" id="messageInput"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a>
195
+ <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>
206
196
 
207
197
  </div>
208
198