WebSocket写的一个聊天室

<!DOCTYPE html> 
   <html lang="en"> 
     <head> 
     <meta charset="UTF-8">  
     <title>Title</title>
     <style> 
     body {  background-color: paleturquoise;  } 
    .box1 {
        width: 400px;
        padding: 10px;
        height: 500px;
        background: whitesmoke;
        margin: auto;
        overflow: auto;
    }

    .phone {
        width: 100%;
        overflow: hidden;
        word-break: break-all;
    }

    .info {
        padding: 10px 0;
        overflow: hidden;
    }

    .name {
        clear: both;
        color: #ccc;
    }

    .text {
        clear: both;
        padding: 5px;
        border-radius: 5px;
    }

    .left .name, .left .text {
        float: left;
    }

    .right .name, .right .text {
        float: right;
    }

    .left .text {
        background-color: #FFFFFF;
        color: #1A3E10;
    }

    .right .text {
        background-color: #A1E85C;
        color: #1A3E10;
    }

    .sys {
        clear: both;
        text-align: center;
        padding: 30px 0 15px;
    }

    .sys p {
        display: inline-block;
        padding: 0;
        margin: 0;
        font-size: 14px;
        color: #fff;
        background-color: #ccc;
        padding: 2px 10px;
        border-radius: 2px;
        text-align: center;
    }

    .box2 {
        width: 400px;
        margin: 10px auto;
        background: white;
        padding: 10px;
        border: 1px solid #ddd;
    }

    input {
        font-size: 14px;
        padding: 5px;
        width: 300px;
        border: none;
        border-radius: 5px;
        outline: none;
        height: 30px;
    }

    button {
        width: 80px;
        font-size: 14px;
        border: 1px solid skyblue;
        height: 40px;
        color: #A1E85C;
        background: white;
        border-radius: 5px;
    }

    .inputbox {
        display: none;
    }

    .login {
        text-align: center;
        margin-top: 50px;
    }

    .welcome {
        width: 100%;
        text-align: center;
        margin-top: 50px;
        color: antiquewhite;
    }

    h1 {
        color: white;
    }
  </style>
</head>
<body>
<div class="welcome"> 
   <h1>1708A聊天室</h1> 
</div> 
<div class="login"> 
  <input id="name" type="text" placeholder="创建昵称，加入聊天室"> 
   <button id="enter">进入</button> 
</div> 
<div class="inputbox"> 
    <div class="box1"> 
         <div class="phone"> 
         </div> 
    </div> 
    <div class="box2"> 
       <input id="socket_text" type="text"> 
       <button id="socket_send">发送</button> 
    </div> 
</div> 
<script src="[jquery-3.2.1.min.js](jquery-3.2.1.min.js)"></script> 
<script>
let userInfo = {
    'userName': '',
    'isSys': 0,
    'content': ''
}
$('#enter').on('click', function () {
    userInfo.userName = $('#name').val()
    if (userInfo.userName == '') {
        alert('请输入用户名');
        return false
    }
    else {
        $('.login').hide();
        $('.inputbox').show();
        //建立连接 初始化WebSocket
        let Socket = new WebSocket('ws://127.0.0.1:2347')
        //开启连接
        Socket.onopen = function () {
            userInfo.isSys = 1 // 是系统消息
            Socket.send(JSON.stringify(userInfo))  // send()只能发送字符串
        };
        // 接受信息 onmessage
        Socket.onmessage = function (event) {
            let data = JSON.parse(event.data)
            if (data.isSys) {
                $('.phone').append(`<div class="sys"><p>系统消息:${data.userName}上线了</p></div>`)
            } else {
                if (userInfo.userName !== data.userName) {
                    $('.phone').append(`<div class="info left"><div class="name">${data.userName}</div><div class="text">${data.content}</div></div>`)
                }
            }
        }
        /*
        *
        * 提升用户体验（网络延时）：
        *   自己发布的内容立即显示出来不走网络
        *   对方看到的内容可能会延迟，但是对于对方来说都是即时获取到的因为他不知道你什么时候发送出去的
        * */
        // 发送聊天内容
        $('#socket_send').on('click',function () {
            userInfo.isSys=0; // 发布聊天内容时设置为"非系统消息"
            userInfo.content=$('#socket_text').val(); // 获取聊天内容
            $('.phone').append(`<div class="info right"><div class="name">${userInfo.userName}</div><div class="text">${userInfo.content}</div></div>`)
            $('#socket_text').val('')
            Socket.send(JSON.stringify(userInfo))
        })
    }
})
</script>
</body>
</html>
WebSocket写的一个聊天室

推荐阅读更多精彩内容
