online-chatroom/Socket/html/ws.js

要修改url路径的文件： 1.html/login.html 48行 2.js/wsServer.js 6行 3.js/ws.js 第2行 和 第11行 4.js/app.js 14行(可以不修改)

(function () {

    let baseUrl = 'http://10.31.161.80:8088'

    if (!localStorage.getItem('LTSusername')) {
        alert('请先登录');
        location.href = `${baseUrl}/login.html`
        return;
    }


    let url = 'ws://10.31.161.80:8888'; // 通信地址
    let ws = new WebSocket(url); // HTML5新增的构造函数
    let text = document.querySelector('#text');
    let talkAbout = document.querySelector('.talkAbout');
    let btn = document.querySelector('#btn');
    let h3 = document.querySelector('h3');

    h3.innerHTML = localStorage.getItem('LTSusername')

    ws.onopen = function () {
        let LTSusername = localStorage.getItem('LTSusername')
        let LTSpassword = localStorage.getItem('LTSpassword')
        ws.send(`{"LTSusername":"${LTSusername}","LTSpassword":"${LTSpassword}"}`);
    }

    let flag = true;
    ws.onmessage = function (ev) {

        let data = ev.data;
        //判断data是否是json数据，写入不同的样式
        try {
            JSON.parse(data);
            flag = true;
        } catch (e) {
            flag = false
        }

        if (!flag) {
            talkAbout.innerHTML += `<span>${data}  ${(new Date).toLocaleTimeString()}</span>`
            flag = false;
            return;
        }

        let LTSusername = JSON.parse(data).username;
        // 如果是自己发的消息显示在右边
        if (LTSusername == localStorage.getItem('LTSusername')) {
            talkAbout.innerHTML += `<dt class="right">${JSON.parse(data).username}</dt>
                                    <dd><p>${JSON.parse(data).msg}</p></dd>
                                    `
        } else {
            // 如果是别人发的，默认显示在左边
            talkAbout.innerHTML += `<dt>${JSON.parse(data).username}</dt>
                                    <dd>${JSON.parse(data).msg}</dd>
                                    `
        }
        // 自动跳到聊天框的滚动最底部
        talkAbout.scrollTop = talkAbout.scrollHeight

    }

    text.onkeyup = function (ev) {
        if (ev.keyCode === 13) {
            let value = text.value;
            value = value.replace(/(^\s*)|(\s*$)/g, "");//去掉空格
            value = value.replace(/<br\s*\/?\s*>/ig,"");//去掉<br>

            if (value) {
                ws.send(this.value);
                this.value = '';
            }else{
                text.value = '';
            }
        }
    }
    btn.onclick = function () {
        let value = text.value;
            value = value.replace(/(^\s*)|(\s*$)/g, "");
            value = value.replace(/<br\s*\/?\s*>/ig,"");//去掉<br>

        if (value) {
            ws.send(text.value);
            text.value = '';
        }else{
            text.value = '';
        }

    }
})();