WebSocket 广播群聊示例-久伴博客

效果图

客户端代码-javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       .main {
     
        max-width: 560px;
        margin: 160px auto;
        box-shadow: 0 0 6px rgba(0, 0, 0, .2);
        padding:16px 16px;
        border-radius: 6px;
       }
       .main_top {
        display: flex;
        flex-direction: column;
        margin: 16px 0;
        box-shadow: 0 0 6px rgba(0, 0, 0, .2);
        padding:16px 16px;
        border-radius: 6px;
        overflow: auto;
        height: 150px;
       }
       .footer {
        display: flex;
        flex-direction: column;
       justify-content: center;
        }
        .footer_button{
            display: flex;
            justify-content: center;
            margin: 16px 0;
        }
        .footer_button button {
            border-radius: 6px;
            background-color: #1890ff;
            color: #fff;
        padding: 9px 0;
            border: none;
         width: 100%;
        }
        #text {
            /*去掉右下角的斜杠，不允许文本框缩放*/
            resize: none;
            background: #FFFFFF;
            /*将边框去掉*/
            border: 0;
            /*设置宽度高度*/
            height: 90px;
            width: 100%;
            padding: 3px 0 0 6px;
            /*设置字体大小*/
            font-size: 18px;
            /* placeholder位置 提示靠左靠右居中等 */
            text-align: left;
            outline: none;
            border: 1px dashed #ccc;
            border-radius: 6px;
            /* 其他样式还有不少，没有用就没查，需要可自行查看 */
        }

    </style>
</head>
<body>
   <!--  <input type="text" placeholder="输入你的内容"> -->
   <div class="main" id="main">
    <div class="main_title">
        <h3>聊天室</h3>
     </div>
    <div class="main_top" >
 
    </div>
    <div class="footer">
        <textarea  name="" id="text" cols="29" rows="9"></textarea>
        <div class="footer_button">
            <button>发送</button>
        </div>
       
    </div>
   
   </div>
 


</body>
<script>
    const TYPE_ENTER=0
    const TYPE_LEAVE=1
    const TYPE_MSG=2
    let main=document.getElementById('main')
    let input=document.querySelector('.footer textarea')
    let button=document.querySelector('button')
    let main_top=main.querySelector('.main_top')

    console.log(main_top)
    let socket = new WebSocket('ws://localhost:3000')

    socket.addEventListener('open',()=>{
      //  top.innerHTML='连接服务成功了'
    })

    button.addEventListener('click',function(){
        let value=input.value

        socket.send(value)
        input.value=''
    })

    socket.addEventListener('message',function(e){
        console.log(e.data)
      var data = JSON.parse(e.data)

        let dv=document.createElement('span')
        dv.innerHTML=data.msg+'********************'+data.time
        if(data.type===TYPE_ENTER){
             dv.style.color='red'
        }
        else if (data.type===TYPE_LEAVE){
            dv.style.color='green'
        }

        else {
            dv.style.color='blue'
        }
        main_top.appendChild(dv)
    })
    socket.addEventListener('close',function(){
        
    })

</script>
</html>

服务端代码-nodejs

const ws = require('nodejs-websocket')
const TYPE_ENTER=0
const TYPE_LEAVE=1
const TYPE_MSG=2
/*type:消息类型 0:表示离开 1:表示进入 2:正常聊天
 */

let count = 0

const server = ws.createServer(conn => {
    console.log('新的连接')
    count++
    //第几个用户
    conn.username = `用户${count}`
    //告诉所有用户加入了聊天室
    broadcast({
        type:TYPE_LEAVE,
        msg:`${conn.username}进入了聊天室`,
        time:new Date().toLocaleDateString()
    })
    conn.on('text', (data) => {
        //接受到某个用户信息的时候，告诉所用用户，发送的消息内容是什么
        broadcast({
            type:TYPE_MSG,
            msg:`${conn.username}:`+data,
            time:new Date().toLocaleDateString()
        })
    })

    conn.on('close', () => {
        //告诉所用用户，谁离开了聊天室
        console.log('关闭连接')
        count--
        broadcast({
            type:TYPE_ENTER,
            msg:`${conn.username}离开了聊天室`,
            time:new Date().toLocaleDateString()
        })
    })

    conn.on('error', () => {
        console.log('异常信息')
    })
})
//广播
function broadcast(msg) {
    //表示所有用户
    server.connections.forEach(item => {
        item.send(JSON.stringify(msg))
    })
}
server.listen(3000, () => {
    console.log('聊天服务器start ok')
})

文章版权归作者所有，未经允许请勿转载。

THE END

nodejs
# socket