nodejs+websocket简易聊天室的学习

最新推荐文章于 2024-08-22 09:57:33 发布

Happy乐Music乐

最新推荐文章于 2024-08-22 09:57:33 发布

阅读量1.8k

点赞数 1

分类专栏：学习笔记文章标签： websocket 学习前端

本文链接：https://blog.csdn.net/weixin_45993900/article/details/124531936

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

老师要求做一个仿探探的小程序项目，我很不幸的成为了混子小组里的一个不那么混的混子，然后恰逢假期，学习了一下nodejs上传图片并将相对路径保存到数据库，本以为完成这个就可以开摆，但我太天真了，几个老外比我还能摆，一放假就不知道迷失在了哪个窑子。只好再对聊天室，聊天功能小作研究，以下是我记录下的一些重点，以供大家参考。

websocket 实现简单的客户端与服务端连接

先放前端代码

<!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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入你的内容">
    <button>发送请求</button>
    <div></div>
    <script>
        var input = document.querySelector('input')
        var button = document.querySelector('button')
        var div = document.querySelector('div')
        //演示websocket在浏览器如何使用
        // H5中已经提供了websocket的api 可以直接使用
        var socket = new WebSocket('ws://localhost:3000');
        
        //
        socket.addEventListener('open',function() {
            div.innerHTML = '连接服务成功'
        })

        button.addEventListener('click',function(){
            var value = input.value
            socket.send(value);  //发送给服务器
        })

        socket.addEventListener('message',function(e) {
            console.log(e.data)
            div.innerHTML = e.data
        })

        socket.addEventListener('close',function() {
            div.innerHTML = '服务断开链接'
        })

    </script>
</body>
</html>

后端代码：注意这里需要npm install nodejs-websocket

// 导入nodejs-websocket
const ws = require('nodejs-websocket')
const PORT = 3000

// 创建一个server
// 每次只要有用户链接， 函数就会被执行，会给当前连接的用户创建一个connect对象
const server = ws.createServer(connect =>{
    console.log('由用户链接了')
    //每当接受到用户传递过来的数据，这个text事件会被触发
    connect.on('text',data=>{
        console.log('接受到数据：',data)
        //给用户一个响应的数据
        // 对用户发送过来的数据 可以直接进行处理

        connect.send(data)
    })
    connect.on('close',()=>{
        console.log('关闭链接')
    })

    connect.on('error',()=>{
        console.log('用户连接异常')
    })

})

server.listen(PORT,() =>{
    console.log('websocket 服务启动成功了 监听'+ PORT)
})

需要注意的是，在前端有这样的代码

   var socket = new WebSocket('ws://localhost:3000');

用处是实例化一个socket对象，让他监听括号里的服务端，而括号内的服务端地址时在后端代码中生成的，因为后端调用了app.listen(3000)

利用以上代码，我们可以做到每当有新的链接产生时，服务端都可以接收到“有新的用户连接了”，并且客户端会自动显示以与服务端连接成功，输入的消息都会直接显示在聊天框内，实际上，客户端发送的信息被服务端处理后返回，并显示在自己的聊天框内，大家可以动手试一下，新建文件夹，命令行输入npm init, 一直回车，然后npm install 相应组件即可，这里只用安装nodejs-websocket。

如果你已经试过了你就会发现，功能实现的太简单了，没有达到聊天室的效果，为此在改代码基础上做出改良版。也是直接放代码。

<!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>
        /* div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        } */
    </style>
</head>
<body>
    <input type="text" placeholder="输入你的内容">
    <button>发送请求</button>
    <div></div>
    <script>
        var input = document.querySelector('input')
        var button = document.querySelector('button')
        var div = document.querySelector('div')
        
        
        const TYPE_ENTER = 0
        const TYPE_LEAVE = 1
        const TYPE_MSG = 2


        //演示websocket在浏览器如何使用
        // H5中已经提供了websocket的api 可以直接使用
        var socket = new WebSocket('ws://localhost:3000');
        
        //
        socket.addEventListener('open',function() {
            div.innerHTML = '连接服务成功'
        })

        button.addEventListener('click',function(){
            var value = input.value
            socket.send(value);  //发送给服务器
            input.value=''
        })

        socket.addEventListener('message',function(e) {
            // console.log(e.data)
            // var dv = document.createElement('div')
            // dv.innerText = e.data
            // div.appendChild(dv)
            var data = JSON.parse(e.data)
            var dv = document.createElement('div')
            dv.innerText = data.msg + '-----' + data.time
            if(data.type === TYPE_ENTER) {
                dv.style.color = 'green'
            } else if(data.type === TYPE_LEAVE) {
                dv.style.color = 'red'
            } else {
                dv.style.color = 'blue'
            }
            div.appendChild(dv)
        })

        socket.addEventListener('close',function() {
            div.innerHTML = '服务断开链接'
        })

    </script>
</body>
</html>

后端：

const ws = require('nodejs-websocket');
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2

//记录当前连接上的用户登录
let count = 0
const server = ws.createServer(conn =>{
    console.log('新的连接')
    count++
    conn.userName = `用户${count}`
    broadcast({
        type: TYPE_ENTER,
        msg: `${conn.userName}进入了聊天室`,
        time: new Date().toLocaleDateString()
    })

    conn.on('text',data=>{
        //2. 当接收到某个用户信息是，发给所有人
        broadcast({
            type: TYPE_MSG,
            msg: data,
            time: new Date().toLocaleTimeString()
        })
    })

    conn.on('close',data=>{
        //3.有人退出 告诉所有人
        console.log('关闭连接')

        count--
        broadcast({
            type: TYPE_LEAVE,
            msg:`${conn.userName}离开了聊天室`,
            time: new Date().toLocaleTimeString()
        })
    })

    conn.on('error',data=>{
        console.log('发生异常')
    })

})
// 广播 给所有人发消息
function broadcast(msg) {
    //server.connections : 表示所有的用户
    server.connections.forEach(item=>{
        item.send(JSON.stringify(msg))
    })
}


server.listen(3000,()=>{
    console.log('监听端口3000')
})