36、webSocket``` 你好欢迎您成为我校2023级新生 ``` ``` var lockReconnect

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
    <title>学院</title>
    <link rel="icon" type="image/x-icon" href="/card/static/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./index.css">
    <script type="text/javascript" src="./websocket.js"></script>
</head>

<body>
    <div class="container">
        <div class="container-cont">
            <div class="header">
                <img class="logo" src="./image/logo.png" alt="">
                <div class="header-date">
                    <div class="date-time" id="date-time"></div>
                    <div class="date-right">
                        <div class="date-date" id="date-date"></div>
                        <div class="date-week" id="date-week"></div>
                    </div>
                </div>
            </div>
            <div class="content-box">
                <div class="cont1" id="cont1">你好</div>
                <div class="cont2" id="cont2">欢迎您成为我校2023级</div>
                <div class="cont34" id="cont34">
                    <div class="cont3" id="cont3"></div>
                    <div class="cont4">新生</div>
                </div>
                <div class="main-cont-box">
                    <div class="role left-top"></div>
                    <div class="role right-top"></div>
                    <div class="role left-bottom"></div>
                    <div class="role right-bottom"></div>
                    <div class="cont-box" id="cont-box">
                        <div class="cont" id="cont">
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


var lockReconnect = false; //避免重复连接
var faceInfoObj = { personName: '',  deptName: ''}
var personInfoObj = {}
var indexId = 0

window.onload = function(){
    // personInfoObj = {
    //     "personName":"人名", //人名
    //     "deptName":"部门"
    // }
    // getPersonInfo()
    // faceInfoObj = {
    //     "personName": "张三",
    //     "deptName": "部门"
    //   }
    // getFacePerson()
    // setInterval(() => {
    //     getFacePerson()
    // }, 5000)

    
    setInterval(() => {
        document.getElementById('cont-box').scrollTop++
    }, 10);
    // 创建WebSocket
    createWebSocket()
}
function showDateTime() {
    var date = new Date()
    var y = date.getFullYear()
    var M = formatNum(date.getMonth() + 1)
    var d = formatNum(date.getDate())
    var h = formatNum(date.getHours())
    var m = formatNum(date.getMinutes())
    var s = formatNum(date.getSeconds())
    var w = date.getDay()
    var week = ['日', '一', '二', '三', '四', '五', '六']
    document.getElementById('date-time').innerHTML = `${h}:${m}:${s}`
    document.getElementById('date-date').innerHTML = `${y}-${M}-${d}`
    document.getElementById('date-week').innerHTML = `星期${week[w]}`
}
function formatNum(m) {
    return m < 10 ? `0${m}` : m
}
//创建WebSocket，判断当前浏览器是否支持WebSocket
function createWebSocket() {
    try {
        if ('WebSocket' in window) {
            var protocol = window.location.protocol;
            var url = window.location.host + "/evo-websocket/evo-face/websocket?keepalive_backend=websocket_evo_face_backend"
            if (protocol === 'http:') {

                window.webSocket = new WebSocket("ws://" + url);

            } else if (protocol === 'https:') {

                window.webSocket = new WebSocket("wss://" + url);

            }
            websocketInit()

        } else {
            Message.error('你的浏览器不支持websocket，请切换浏览器。');
        }

    } catch (e) {

        websocketReconnect()

    }

}
// websocketInit初始化
var timeId = null;
function websocketInit() {
    //连接成功建立的回调方法
    webSocket.onopen = function() {
        console.log("webSocket连接成功");
        webSocket.send('faceNew');
        timeId = setInterval(() => {
           webSocket.send('faceNew');
        }, 30000)
    };

    webSocket.onclose = function(e) {
        console.log("webSocket连接关闭");
        websocketReconnect()
    };

    //每个页面接收消息的处理方式都不同
    webSocket.onerror = function() {
        console.log("WebSocket连接发生错误");
    };
    webSocket.onmessage = function (event) {

        console.log('event.data = ', JSON.parse(event.data))
        var data = JSON.parse(event.data)
        
        if (data.chnName === 'faceNew') {
            faceInfoObj = data.msg
            getFacePerson()
            getPersonInfo()
        }

    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

    window.onbeforeunload = function() {

        webSocket.close();
    }
}

// websocket重连
function websocketReconnect() {

    if (lockReconnect) { // 是否已经执行重连
        return;
    }

    lockReconnect = true;

    //没连接上会一直重连，设置延迟避免请求过多

    timer && clearTimeout(timer);

    var timer = setTimeout(function() {

        createWebSocket()

        lockReconnect = false;

    }, 3000);
}

function getPersonInfo() {
    document.getElementById('cont1').innerHTML = `${faceInfoObj.personName}，你好`
    document.getElementById('cont3').innerHTML = `${faceInfoObj.parentDeptName}${faceInfoObj.deptName} `
}

function getFacePerson() {
    var contitembox = document.getElementsByClassName('cont-item-box')
    var contitembox_num = contitembox.length
    if (contitembox_num === 0) {
        var index = contitembox_num * 4 + 1
        index = index < 10 ? `0${index}` : index
        el = 
            `<div class="cont-item">
                <div class="item-label">${index}</div>
                <div class="item-value">欢迎${faceInfoObj.parentDeptName}${faceInfoObj.personName}同学</div>
            </div>`
        var div = document.createElement('div')
        div.setAttribute('class', "cont-item-box")
        div.innerHTML = el
        document.getElementById('cont').appendChild(div)
        return
    } else {
        
        var last_contitembox = contitembox[contitembox_num - 1]
        var last_contitembox_children = last_contitembox.children
        var last_contitembox_children_index = last_contitembox_children.length
        var el = ''
        if (last_contitembox_children_index < 4) {
            var index = (contitembox_num - 1) * 4 + last_contitembox_children_index + 1
            index = index < 10 ? `0${index}` : index
            el = 
                `
                    <div class="item-label">${index}</div>
                    <div class="item-value">欢迎${faceInfoObj.parentDeptName}${faceInfoObj.personName}同学</div>
                `
            var div = document.createElement('div')
            div.setAttribute('class', "cont-item")
            div.innerHTML = el
            last_contitembox.appendChild(div)
        } else {
            var index = contitembox_num * 4 + 1
            index = index < 10 ? `0${index}` : index
            el = 
                `<div class="cont-item">
                    <div class="item-label">${index}</div>
                    <div class="item-value">欢迎${faceInfoObj.parentDeptName}${faceInfoObj.personName}同学</div>
                </div>`
            var div = document.createElement('div')
            div.setAttribute('class', "cont-item-box")
            div.innerHTML = el
            document.getElementById('cont').appendChild(div)
        }
    }

}