简单聊天室的实现

最新推荐文章于 2024-05-29 21:49:26 发布

永年一朵花

最新推荐文章于 2024-05-29 21:49:26 发布

阅读量1.4k

点赞数 2

分类专栏：前端文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/qq_55791710/article/details/122494993

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基于websocket来实现一个在线聊天的小工具

运行效果实现步骤：

1.使用npm install nodejs-websocket装包

2.创建一个app.js文件，首先使用require将nodejs-websocket包引入赋值给变量ws，后续通过变量ws创建一个server服务，并写入箭头函数，参数写为connect后面的每个用户连接都会创建一个connect对象，将创建好的server服务赋值给常量server，最后监听server

const ws = require('nodejs-websocket')
const TYPE__ENTER = 0;
const TYPE__LEAVE = 1;
const TYPE__MSG = 2;
let count = 0

//每次有用户连接都会创建一个connect对象
const server = ws.createServer(connect => {
    count++
    connect.username = `用户${count}`
    broadcast({
        type:TYPE__ENTER,
        msg:`${connect.username}进入了聊天室`,
        date:new Date().toLocaleDateString()
    })
    connect.on('text', data => {
        broadcast({
            type:TYPE__MSG,
            msg:data,
            date:new Date().toLocaleDateString()
        })
    })
    connect.on('close', () => {
        count--
        broadcast({
            type:TYPE__LEAVE,
            msg:`${connect.username}离开了聊天室`,
            date:new Date().toLocaleDateString()
        })
    })
    connect.on('error', () => {
        console.log('error');
    })
})
//定义一个广播函数broadcast
function broadcast(msg) {
    server.connections.forEach(item => {
        item.send(JSON.stringify(msg))
    })
}
server.listen(3000, () => {
    console.log('server正在运行端口为',3000);
})

3.使用node执行app.js，服务就会运行在3000端口

4.在html文件中创建webSocket的实例并监听3000端口

5.监听socke是否打开和监听socket服务中的数据，并且给button按钮添加点击事件

html详细代码

<!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>
</head>
<body>
    <input type="text">
    <button>发送</button>
    <div></div>
    <script>
        const div = document.querySelector('div')
        const input = document.querySelector('input')
        const button = document.querySelector('button')
        const socket = new WebSocket('ws://localhost:3000')
        //给socket添加监听事件，open
        socket.addEventListener('open', () => {
          div.innerHTML = 'socket服务启动成功'
        })
        //点击button按钮发送数据
        button.addEventListener('click', () => {
            var value = input.value
            input.value = ''
            socket.send(value)
        })
        //接受socket服务的数据
        socket.addEventListener('message', (e) => {
            var dv =document.createElement('div')
            console.log(e.data.type);
            //将json格式的字符串转为对象
            var data = JSON.parse(e.data)
            if(data.type === 0){
                dv.style.color = 'green'
            }else if(data.type === 1){
                dv.style.color = 'red'
            }else{
                dv.style.color = 'blue'
            }
            console.log(data);
            dv.innerHTML = data.msg+'---'+data.date
            div.appendChild(dv)
        })
        </script>
</body>
</html>

总结：