Skip to content

C
Campus

御承扬 / Campus

通知 1
Star 0
Fork 0
C
Campus

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
PrivateChat.html 4.9 KB
Newer Older
7
add function  
7wc98#14 已提交
1 2 3 4 5 6 7 8 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>私聊</title>
    <script src="js/stomp.min.js"></script>
    <script src="js/sockjs.min.js"></script>
    <script src="js/jquery.js"></script>
7
commit  
7wc98#14 已提交
9 
    <link rel="stylesheet" href="../../static/css/chat.css">
7
add function  
7wc98#14 已提交
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 
    <!-- 最新版本的 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">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
7
commit  
7wc98#14 已提交
25 26 

<!--<div class="panel panel-primary">
7
add function  
7wc98#14 已提交
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 
    <div class="page-header">
        <h3 class="panel-title">注意</h3>
    </div>
    <div class="panel-body">
        <div class="panel-heading" th:text="${msg.title}"></div>
        <div class="panel-info" th:text="${msg.content}"></div>
    </div>
</div>
<div  th:if="${friendStatus}">
    <p>聊天室</p>
    <form id="chatForm">
        <label for="fromName">我：</label>
        <input type="text" id="fromName" name="fromName" th:value="${fromName}" readonly="readonly">
        <label for="toName">对方：</label>
        <input type="text" id="toName" name="toName" th:value="${toName}" readonly="readonly">
        <br>
        <label>
            <textarea rows="4" cols="60" name="text"></textarea>
        </label>
        <br>
        <input type="submit" value="发送">
    </form>
    <div class="col-md-8" id="output"></div>
7
commit  
7wc98#14 已提交
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 
</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>
7
add function  
7wc98#14 已提交
91 92 93 94 
</div>
<script th:inline="javascript">
    $('#chatForm').submit(function (e) {
        e.preventDefault();
7
commit  
7wc98#14 已提交
95 96 97 98 99 100 
        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);
7
add function  
7wc98#14 已提交
101 102 103 104 105 106 107 
    });
    var sock = new SockJS("/endPointChat");
    var stomp = Stomp.over(sock);
    stomp.connect('guest','guest',function (frame) {
        stomp.subscribe("/user/queue/notification",handleNotification);
    });
    function handleNotification(message) {
7
commit  
7wc98#14 已提交
108 109 110 111 
        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>")*/
7
add function  
7wc98#14 已提交
112 
    }
7
commit  
7wc98#14 已提交
113 114 
    function sendSpittle(text) {
        stomp.send("/chat/"+[[${toName}]],{},text);
7
add function  
7wc98#14 已提交
115 116 117 118 119 
    }
    $('#stop').click(function () {
        sock.close()
    });
</script>
7
commit  
7wc98#14 已提交
120 121 
</body>
</html>