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="創(chuàng)建昵稱，加入聊天室"> 
   <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">發(fā)送</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 // 是系統(tǒng)消息
            Socket.send(JSON.stringify(userInfo))  // send()只能發(fā)送字符串
        };
        // 接受信息 onmessage
        Socket.onmessage = function (event) {
            let data = JSON.parse(event.data)
            if (data.isSys) {
                $('.phone').append(`<div class="sys"><p>系統(tǒng)消息:${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>`)
                }
            }
        }
        /*
        *
        * 提升用戶體驗（網(wǎng)絡延時）：
        *   自己發(fā)布的內容立即顯示出來不走網(wǎng)絡
        *   對方看到的內容可能會延遲，但是對于對方來說都是即時獲取到的因為他不知道你什么時候發(fā)送出去的
        * */
        // 發(fā)送聊天內容
        $('#socket_send').on('click',function () {
            userInfo.isSys=0; // 發(fā)布聊天內容時設置為"非系統(tǒng)消息"
            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>

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末啸罢，一起剝皮案震驚了整個濱河市厕怜，隨后出現(xiàn)的幾起案子琅捏，更是在濱河造成了極大的恐慌拦焚，老刑警劉巖蠢甲，帶你破解...
沈念sama閱讀 212,884評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件曼追，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,755評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門未辆，熙熙樓的掌柜王于貴愁眉苦臉地迎上來兼蜈，“玉大人辐棒，你說我怎么就攤上這事》拢” “怎么了陕截？”我有些...
開封第一講書人閱讀 158,369評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我缘屹，道長，這世上最難降的妖魔是什么炊昆？我笑而不...
開封第一講書人閱讀 56,799評論 1贊 285
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮棺榔，結果婚禮上宛蚓，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 65,910評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布椭懊。她就那樣靜靜地躺著背犯，像睡著了一般柱锹。火紅的嫁衣襯著肌膚如雪禁熏。梳的紋絲不亂的頭發(fā)上瞧毙，一...
開封第一講書人閱讀 50,096評論 1贊 291
城市分裂傳說
那天剪决，我揣著相機與錄音享言，去河邊找鬼。笑死，一個胖子當著我的面吹牛需忿，可吹牛的內容都是我干的。我是一名探鬼主播蜡歹，決...
沈念sama閱讀 39,159評論 3贊 411
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼屋厘，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了季稳？” 一聲冷哼從身側響起擅这，我...
開封第一講書人閱讀 37,917評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤澈魄，失蹤者是張志新（化名）和其女友劉穎景鼠，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痹扇，經(jīng)...
沈念sama閱讀 44,360評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡铛漓，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 36,673評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了鲫构。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浓恶。...
茶點故事閱讀 38,814評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖结笨，靈堂內的尸體忽然破棺而出包晰，到底是詐尸還是另有隱情，我是刑警寧澤炕吸，帶...
沈念sama閱讀 34,509評論 4贊 334
?日本核電站爆炸內幕
正文年R本政府宣布伐憾，位于F島的核電站，受9級特大地震影響赫模，放射性物質發(fā)生泄漏树肃。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 40,156評論 3贊 317
男人毒藥：我在死后第九天來索命
文/蒙蒙一瀑罗、第九天我趴在偏房一處隱蔽的房頂上張望胸嘴。院中可真熱鬧雏掠，春花似錦、人聲如沸劣像。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,882評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽驾讲。三九已至蚊伞，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間吮铭，已是汗流浹背时迫。一陣腳步聲響...
開封第一講書人閱讀 32,123評論 1贊 267
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谓晌，地道東北人掠拳。一個月前我還...
沈念sama閱讀 46,641評論 2贊 362
代替公主和親
正文我出身青樓，卻偏偏與公主長得像纸肉，于是被迫代替她去往敵國和親溺欧。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 43,728評論 2贊 351

WebSocket寫的一個聊天室

推薦閱讀更多精彩內容