js實現websocket實例

<!-- websocket 接口 -->
<script type="text/javascript">
var websocket_url = 'ws://127.0.0.1:' + "{$Think.config.prompt_service.ws_port}";
var admin_userid = "{$Think.const.UID}";
var socket_type = JSON.parse('{$mginfo.socket_type|default=[]|json_encode}');
</script>
<script src="__JS__/socket_notify.js?v=20191018"></script>

 socket_notify.js

var ws_text = document.location.protocol == 'https:' ? 'wss' : 'ws';
websocket_url = ws_text + '://' + window.location.host + '/socket.io/';
var socket = new WebSocket(websocket_url);

//連接成功時觸發
socket.onopen = function() {
    console.log('connected to server!');
    // 登錄
    socket.send(JSON.stringify({
        type: 'login',
        uid: admin_userid,
    }));

    setInterval(function() {
        console.log('Hello!');
        socket.send('Hello!');
    }, 30000)
};
var socket_func = {};

//監聽收到的消息
socket.onmessage = function(res) {
    let Sound      = false;
    let alerttitle = false;
    let alerttext  = false;
    let alertlocal = false;
    let content    = '';
    let func       = '';

    var data = JSON.parse(res.data);
    console.log(data);
    var type = data.type;
    try {
        content = JSON.parse(data.data);
    } catch (err) {
        content = data.data;
    }
    const alert_check = data.alert;

    switch (type) {
        case 'newCpOrder':
            func       = type;
            Sound      = 1;
            alerttitle = '新公司入款訂單';
            alerttext  = '訂單ID：' + content.id;
            alertlocal = '/cp_recharge/index.html';
            break;
        case 'newAgentOrder':
            func       = 'newTxOrder';
            Sound      = 2;
            alerttitle = '新代理出款訂單';
            alerttext  = '訂單ID：' + content.id;
            alertlocal = '/exchange/index.html';
            break;
       
    }

    if (alert_check) {
        if ((!socket_type[type] || socket_type[type]['sound'] === 1) && Sound !== false) {
            playSound(Sound);
        }

        if ((!socket_type[type] || socket_type[type]['text'] === 1) && alerttitle !== false) {
            notify(alerttitle, alerttext, alertlocal);
        }
    }

    // 執行方法
    if (func) {
        try {
            socket_func[func](content);
        } catch (err) {
            console.log('沒有當前方法' + func);
        }
    }
};

// 斷開
socket.onclose = function(e) {
    console.log('websocket 斷開: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
    console.log(e);
}

var Notification = window.Notification || window.webkitNotification || window.mozNotification;
var stopSound = function() {};

// 播放聲音
var playSound = function(type) {
    var audio_id = 'recharge_audio';
    switch (type) {
        case 1:
            audio_id = 'recharge_audio';
            break;
        case 2:
            audio_id = 'withdraw_audio';
            break;
        case 3:
            audio_id = 'withdraw_audio';
            break;
        case 4:
            audio_id = 'untreated_recharge';
            break;
        case 5:
            audio_id = 'untreated_withdraw';
            break;
        case 6:
            audio_id = 'large_recharge';
            break;
        default:
    }

    var audio = document.getElementById(audio_id);
    audio.currentTime = 0;
    audio.play();
};

var notify = function() {};

// web 頁面通知
if (Notification) {
    Notification.requestPermission().then(function(permission) {
        if (permission === 'granted') {
            notify = function(title, content, url) {
                var options = {
                    body: content,
                };
                var instance = new Notification(title, options);
                instance.onshow = function() {
                    setTimeout(function() {
                        instance.close();
                    }, 18000);
                };
                instance.onclick = function() {
                    window.open(url);
                };
            };
            window.notify = notify;
        }
    });
}