teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コード追記

2015/08/03 06:19

投稿

Sfidante
Sfidante

スコア90

title CHANGED
File without changes
body CHANGED
@@ -71,4 +71,57 @@
71
71
  <a href="javascript:;" id="c-btn_chenge"><img src="image/images/send_btn_03.png" alt="送信ボタン" class="p-message_send"></a>
72
72
  </div>
73
73
  </div>
74
+ ```
75
+
76
+ ---
77
+ 追記
78
+ 改変後のコード
79
+ ```javascript
80
+ var webSocket;
81
+ window.onload = function() {
82
+ var forRtoA = document.createElement('a');
83
+ forRtoA.href = "loadMessage";
84
+ webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://"));
85
+ var messageArea = document.getElementById("message-list");
86
+ var sessionid = document.getElementById("sessionID").value;
87
+ var photo = document.getElementById("yourphoto").value;
88
+
89
+ var appendMessage = function(value, session) {
90
+ var string = value.replace("/\r\n|\n|\r/g", "<br>");
91
+ var messageElement = document.createElement("messageArea");
92
+ var time = new Date();
93
+ var month = time.getMonth() + 1;
94
+ if(month < 10) { month = "0" + month; }
95
+ var day = time.getDate();
96
+ if(day < 10) { day = "0" + day; }
97
+ var hour = time.getHours();
98
+ if(hour < 10) { hour = "0" + hour; }
99
+ var minute = time.getMinutes();
100
+ if(minute < 10) { minute = "0" + minute; }
101
+ var now = month + "/" + day + " " + hour + ":" + minute;
102
+ if(session == sessionid){
103
+ 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>';
104
+ }else{
105
+ 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>';
106
+ }
107
+ messageArea.appendChild(messageElement);
108
+ var message_box = document.getElementById("message_box");
109
+ message_box.scrollTop = message_box;
110
+ }
111
+
112
+ webSocket.onmessage = function(message) {
113
+ var data = JSON.parse(message.data);
114
+ appendMessage(data.text, data.sessionid);
115
+ }
116
+
117
+ var messageInput = document.getElementById("c-btn_chenge");
118
+ var messageText = document.getElementById("messageInput");
119
+ messageInput.onclick = function() {
120
+ var message = messageText.value;
121
+ if (webSocket && "" != message) {
122
+ webSocket.send(message);
123
+ messageText.value = "";
124
+ }
125
+ }
126
+ }
74
127
  ```