php_group
/
htdoc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<?
session_start();
echo "<meta charset=utf8>";
if ($_SESSION['id'] == '' || $_SESSION['id'] == null) {
    echo '您尚未登入';
    exit;
}
include "connect.php";
$id = $_SESSION['id'];
$name = $_SESSION['name'];

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>002</title>
    <script src="function.js"></script>
    <script src="../public/js/layui/layui.js"></script>
	<script src="layer.js"></script>
</head>
<body>
    <style>
        body{
            padding: 0px;
            margin: 0px;
        }
        .div1{
            background:#333;
            color:#fff;
            height:80vh;
            width:100vw;
            overflow-y: auto;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            /* Firefox */
            -webkit-box-sizing:border-box;
            /* Safari */
            padding:1em;
        }
        .divmsg{
            white-space:normal;
            word-break:break-all;
        }
        .div2{
            width:100vw;
            height:20vh;
        }
        .flex-row{
            display: flex;
            flex-direction: column;
        }
        .div{
            height:100vh;
        }
        .textarea{
            flex-grow: 4;
        }
        .submit_btn{
            flex-grow: 1;
        }
        .name{
            width:100%;
            text-align:right;
            display: inline-block;
        }
        .othermsg *{
            text-align:left;
        }
        .mymsg *{
            text-align:right;
        }
        .timetext{
            width:100%;
            font-size:11px;
            display: inline-block;
        }
        .div2_un_button{
            display: flex;
            flex-direction: column;
            justify-content:center;
            background:#ddd;
            text-align:center;
        }
    </style>
    <div class="div flex-row">
        <div class="div1" id="div1">
        </div>
        <div class="div2 flex-row" id="div2">
            <textarea name="" id="msg" class="textarea"></textarea>
            <button class="submit_btn" id="submit_btn" >提交</button>
        </div>
    </div>
    <script>
        var id = "<?echo $id ?>";
        var name = "<?echo $name ?>";
        var div = document.getElementById("div1")
        var button =  document.getElementById("submit_btn")
        var type = <?php echo $_SESSION['type']; ?>;
        var ws = new WebSocket("ws://app.tjzhxx.cn:3002");
        ws.addEventListener("open", () => {
            // 将服务器连接成功的信息打印到div中
            console.log("Connection open ...");
        });
        ws.addEventListener("message", (e) => {
            //console.log(e);
            var data = JSON.parse(e.data);
            //保存信息
            var str = div.innerHTML;
            var classname="othermsg";
            if(id == data.id){
                classname="mymsg";
            }
            var html = str+"<div class='"+classname+"'><p><b class='name'>"+data.name+"</b><span class='timetext'>"+gettime()+"</span></p><pre class='divmsg'>"+data.msg+"</pre></div>";
            div.innerHTML = html
            div.scrollTop = div.scrollHeight+200;

            //ws.close()
        });
        ws.addEventListener("close", (evt) => {
            console.log("Connection closed.");
        });
        ws.addEventListener("error", (err) => {
            console.log("ERROR");
            console.log(err);
        });
        if(type<=0){
            document.getElementById("div2").innerHTML ="无聊天权限";
            document.getElementById("div2").className +=" div2_un_button";

        }else{
            button.addEventListener("click", () => {
                var msg = document.getElementById("msg").value;
                let sendobj={
                    id:id,
                    name:name,
                    msg:msg
                }
                  //保存聊天信息
                var saveData=sendobj;
                //console.log(saveData);
                saveChat(saveData);
                ws.send(JSON.stringify(sendobj));
                //var height =  $('#div1').outerHeight();
                //$('#div1').scrollTop(parseInt(height)+50);
            });
        }
    </script>
</body>
</html>