php_group
/
htdoc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<?
session_start();
echo "<meta charset=utf8>";
if ($_SESSION['id'] == '' || $_SESSION['id'] == null) {
    echo '您尚未登入';
    exit;
}
include "connect.php";
$id = $_SESSION['id'];
$name = $_SESSION['name'];
$token = $_SESSION['token'];
/*require './connectnim.php';
$result = $p->queryUserRoomIds($accid);*/

?>
<!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>
</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;
        }
        .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;
        }
    </style>
    <div class="div flex-row">
        <div class="div1" id="div1">
        </div>
        <div class="div2 flex-row">
            <textarea name="" id="msg" class="textarea"></textarea>
            <button class="submit_btn" id="submit_btn" >提交</button>
        </div>
    </div>
    <!--<script src="./NIM_Web/NIM_Web_Chatroom_v9.1.1.js"></script>-->
    <!--<?echo $token ?>-->
    <!--<script>
        var token ="token";
        var chatroomId = 1;
        var appKey="9db7587502c900c7cad2d8489f98c0d8";
        var account = "";
        var chatroom = new Chatroom({
            appKey: appKey,
            account: account,
            token: token,
            chatroomId: chatroomId,
            chatroomAddresses: [
                'localhost',
                'address2'
            ],
            onconnect: onChatroomConnect,
            onerror: onChatroomError,
            onwillreconnect: onChatroomWillReconnect,
            ondisconnect: onChatroomDisconnect,
            // 消息
            onmsgs: onChatroomMsgs
        });
        function onChatroomConnect(chatroomInfo) {
            console.log('进入聊天室', chatroomInfo);
        }
        function onChatroomWillReconnect(obj) {
            // 此时说明 `SDK` 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
            console.log('即将重连', obj);
        }
        function onChatroomDisconnect(error) {
            // 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
            console.log('连接断开', error);
            if (error) {
                switch (error.code) {
                // 账号或者密码错误, 请跳转到登录页面并提示错误
                case 302:
                    break;
                // 被踢, 请提示错误后跳转到登录页面
                case 'kicked':
                    break;
                default:
                    break;
                }
            }
        }
        function onChatroomError(error, obj) {
            console.log('发生错误', error, obj);
        }
        function onChatroomMsgs(msgs) {
            console.log('收到聊天室消息', msgs);
        }
    </script>-->
    <script>
        var id = "<?echo $id ?>";
        var name = "<?echo $name ?>";
        var div = document.getElementById("div1")
        var button =  document.getElementById("submit_btn")
        var ws = new WebSocket("ws://localhost:3000");
        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>"+data.msg+"</pre></div>";
            div.innerHTML = html
            div.scrollTop = div.scrollHeight+200;
            //ws.close()
        });
        button.addEventListener("click", () => {
            var msg = document.getElementById("msg").value;
            let sendobj={
                id:id,
                name:name,
                msg:msg
            }
            ws.send(JSON.stringify(sendobj));
            //var height =  $('#div1').outerHeight();
            //$('#div1').scrollTop(parseInt(height)+50);
        });
        ws.addEventListener("close", (evt) => {
            console.log("Connection closed.");
        });
        ws.addEventListener("error", (err) => {
            console.log("ERROR");
            console.log(err);
        });

    </script>
</body>
</html>