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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 160,165评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,720评论 1赞 298
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,849评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,245评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,596评论 3赞 288
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,747评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,977评论 2赞 315
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,708评论 0赞 204
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,448评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,657评论 2赞 249
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,141评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,493评论 3赞 258
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,153评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,108评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,890评论 0赞 198
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,799评论 2赞 277
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,685评论 2赞 272

WebSocket写的一个聊天室

推荐阅读更多精彩内容