Q&A
プログラミングをはじめて2か月弱の者です。
現在websocketを使用してチャットアプリをつくっているのですが
表示に関してうまくいっていません。
前提・実現したいこと
データベースからArray型で取得した要素に
要素ごとに枠線で囲って表示したいと考えています。
身近なものでたとえると、LINEのようなイメージです。
発生している問題・エラーメッセージ
メッセージごとではなくすべてのメッセージがひとつの枠線で囲われてしまっています。
実現したいもののイメージ
＿＿＿＿＿＿＿＿＿＿
｜こんにちは ｜
＿＿＿＿＿＿＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
｜こんばんは ｜
＿＿＿＿＿＿＿＿＿＿
現時点のもの
＿＿＿＿＿＿＿＿＿＿
｜こんにちは ｜
｜こんばんは ｜
＿＿＿＿＿＿＿＿＿＿
該当のソースコード
html
1 ～略～ 2 3 4 function connect() { 5 var socket = new SockJS('chatPage'); // WebSocketに接続 6 stompClient = Stomp.over(socket); 7 stompClient.connect({}, function (frame) { 8// setConnected(true); 9 console.log('Connected: ' + frame); 10 stompClient.subscribe('/topic/greetings', function (greeting) { // 挨拶の応答(/topic/greetings)を購読する 11 let messages=(JSON.parse(greeting.body).content); 12 for(let message of messages){ 13 showGreeting(message); 14 } 15 }); 16 }); 17 } 18 19 function sendMessage() { 20 var message = document.getElementById('message').value; 21 stompClient.send("/app/chatPage", {}, JSON.stringify({'message': message})); // メッセージを送信 22 } 23 24 function showGreeting(message) { 25 var response = document.getElementById('response'); 26 var p = document.createElement('p'); 27 p.style.wordWrap = 'break-word'; 28 p.appendChild(document.createTextNode(message)); 29 response.appendChild(p); 30 response.style.display = "block"; 31 } 32 33 </script> 34</head> 35 36 37<body onload="connect();"> 38 39 40 <header> 41 42 </header> 43 44 <div class="chatspace" > 45 <p id="response"></p> 46 </div> 47 48 <footer> 49 <table> 50 <tr> 51 <form > 52 <td><textarea id="message" type="text" maxlength="90"></textarea></td> 53 <td><button id="send" onclick="sendMessage();">送信</button></td> 54 </form> 55 </tr> 56 </table> 57 </footer> 58 </body> 59</html>
回答1件
0
どうやって枠を付けているのかが不明ですが、もしかしてCSSでp#responseにborderで線を描いていたりするのでしょうか。
showGreetingで
JavaScript
1 p.style.border = '1px solid green;';
とかすれば、メッセージごとにborderが付くと思います。
投稿2021/06/14 13:34
総合スコア8402
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/14 13:44