commit

pom.xml

@@ -6,7 +6,7 @@
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-parent</artifactId>
         <version>2.2.6.RELEASE</version>
-        <relativePath/> <!-- lookup parent from repository -->
+        <relativePath/>
     </parent>
     <groupId>com.pyc</groupId>
     <artifactId>campus</artifactId>

src/main/java/com/pyc/campus/controller/ChatController.java

@@ -32,6 +32,6 @@ public class ChatController {
 
     @MessageMapping(value = "/chat/{name}")
     public void handleChat(Principal principal, String msg,  @DestinationVariable String name){
-        messagingTemplate.convertAndSendToUser(name,"/queue/notification",principal.getName()+"-send:"+msg);
+        messagingTemplate.convertAndSendToUser(name,"/queue/notification",msg);
     }
 }

src/main/resources/static/css/chat.css

+div.speech {
+    float: left;
+    margin: 10px 0;
+    padding: 8px;
+    table-layout: fixed;
+    word-break: break-all;
+    position: relative;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#ffffff),
+    color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c));
+    border: 1px solid #989898;
+    border-radius: 8px;
+}
+div.speech:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 15px;
+    top: -20px;
+    border: 10px solid;
+    border-color: transparent transparent #989898 transparent;
+}
+
+div.speech:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 17px;
+    top: -16px;
+    border: 8px solid;
+    border-color: transparent transparent #ffffff transparent;
+}
+div.speech.right {
+    display: inline-block;
+    box-shadow: -2px 2px 5px #CCC;
+    margin-right: 10px;
+    max-width: 75%;
+    float: right;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50),
+    color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40));
+}
+div.speech.right:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 9px;
+    bottom: auto;
+    left: auto;
+    right: -10px;
+    border-width: 9px 0 9px 10px;
+    border-color: transparent #989898;
+}
+div.speech.right:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 10px;
+    bottom: auto;
+    left: auto;
+    right: -8px;
+    border-width: 8px 0 8px 9px;
+    border-color: transparent #bced50;
+}
+div .left {
+    display: inline-block;
+    box-shadow: 2px 2px 2px #CCCCCC;
+    margin-left: 10px;
+    max-width: 75%;
+    position: relative;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#ffffff),
+    color-stop(0.1, #eae8e8), color-stop(0.4, dodgerblue), color-stop(0.8, #DFDFDF), to(dodgerblue));
+    /*#D9D9D9*/
+}
+div .left:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 9px;
+    bottom: auto;
+    left: -10px;
+    border-width: 9px 10px 9px 0;
+    border-color: transparent #989898;
+}
+
+div .left:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 10px;
+    bottom: auto;
+    left: -8px;
+    border-width: 8px 9px 8px 0;
+    border-color: transparent #eae8e8;
+}
+.left_img {
+    float: left;
+    margin-top: 10px;
+}
+.right_img {
+    float: right;
+    margin-top: 10px;
+}
+.left_d {
+    clear: both;
+    float: left;
+    margin-left: 10px;
+}
+.right_d {
+    clear: both;
+    float: right;
+    margin-right: 10px;
+}
+.left_d_h {
+    width: 39px;
+    height: 39px;
+    border-radius: 100%;
+    display: block;
+    float: left;
+    overflow: hidden;
+}
+.left_d_h img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+.right_d_h {
+    width: 39px;
+    height: 39px;
+    border-radius: 100%;
+    display: block;
+    float: right;
+    overflow: hidden;
+}
+.right_d_h img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
\ No newline at end of file

src/main/resources/templates/page/PrivateChat.html

@@ -6,6 +6,7 @@
     <script src="js/stomp.min.js"></script>
     <script src="js/sockjs.min.js"></script>
     <script src="js/jquery.js"></script>
+    <link rel="stylesheet" href="../../static/css/chat.css">
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -21,7 +22,8 @@
     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 </head>
 <body>
-<div class="panel panel-primary">
+
+<!--<div class="panel panel-primary">
     <div class="page-header">
         <h3 class="panel-title">注意</h3>
     </div>
@@ -35,7 +37,6 @@
     <form id="chatForm">
         <label for="fromName">我：</label>
         <input type="text" id="fromName" name="fromName" th:value="${fromName}" readonly="readonly">
-        <br>
         <label for="toName">对方：</label>
         <input type="text" id="toName" name="toName" th:value="${toName}" readonly="readonly">
         <br>
@@ -46,14 +47,57 @@
         <input type="submit" value="发送">
     </form>
     <div class="col-md-8" id="output"></div>
+</div>-->
+<div class="container">
+    <div class="row">
+        <div style="text-align: center;">
+            <div class="col-md-8">
+                <div class="panel panel-primary">
+                    <div class="panel-heading">
+                        <div class="panel-title">
+                            提示
+                        </div>
+                    </div>
+                    <div class="panel-body">
+                        <div class="panel-info" th:text="${msg.content}">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <div class="panel panel-primary">
+                    <div class="panel-heading">
+                        <div class="panel-title" th:text="${toName}">
+                        </div>
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <div style="height: 400px;width: 720px;overflow: auto;background:#EEEEEE;" id="output">
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <form class="form-inline" id="chatForm">
+                    <div class="form-group">
+                        <label for="text">输入框：</label>
+                        <input type="text" name="text" class="form-control" style="width: 520px" id="text" placeholder="输入要发送的信息">
+                    </div>
+                    <button type="submit" class="btn btn-primary">发送</button>
+                </form>
+            </div>
+        </div>
+    </div>
 </div>
 <script th:inline="javascript">
     $('#chatForm').submit(function (e) {
         e.preventDefault();
-        var text = $('#chatForm').find('textarea[name="text"]').val();
-        var fromName = $('#chatForm').find('input[name="fromName"]').val();
-        var toName = $('#chatForm').find('input[name="toName"]').val();
-        sendSpittle(text,fromName,toName);
+        var text = $('#chatForm').find('input[name="text"]').val();
+        /*var fromName = $('#chatForm').find('input[name="fromName"]').val();
+        var toName = $('#chatForm').find('input[name="toName"]').val();*/
+        let str="<div class='left_d'><div class='speech left' ng-class='speech left'>"+text+"</div></div>";
+        $('#output').append(str);
+        sendSpittle(text);
     });
     var sock = new SockJS("/endPointChat");
     var stomp = Stomp.over(sock);
@@ -61,13 +105,17 @@
         stomp.subscribe("/user/queue/notification",handleNotification);
     });
     function handleNotification(message) {
-        $('#output').append("</br>Received: "+message.body+"</b></br>")
+        let str="<div class=\"right_d\"><div class=\"speech right\" ng-class=\"speech right\">"+message.body+"</div></div>";
+        $('#output').append(str);
+        console.log(str);
+        /*$('#output').append("</br><b>"+[[${toName}]]+":"+message.body+"</b></br>")*/
     }
-    function sendSpittle(text,fromName,toName) {
-        stomp.send("/chat/"+toName,{},text);
+    function sendSpittle(text) {
+        stomp.send("/chat/"+[[${toName}]],{},text);
     }
     $('#stop').click(function () {
         sock.close()
     });
 </script>
 </body>
+</html>
\ No newline at end of file