websocket实现简易聊天室

最新推荐文章于 2024-05-03 22:03:49 发布

置顶是个程序员吧

最新推荐文章于 2024-05-03 22:03:49 发布

阅读量3.4k

点赞数 10

文章标签： tcp/ip 前端 websocket http node.js

本文链接：https://blog.csdn.net/qq_47199913/article/details/124455621

版权

websocket支持全双工通信，也就是客户端和服务端双向通信。以前都是通过http轮询的方式实现实时的，这非常耗性能。Websocket不仅能节省资源和带宽，还能实现长链接的作用

前端通过创建WebSocket对象，然后通过addEventListener方法来监听启动服务（open方法）和接受数据（message方法）

前端准备：

<!DOCTYPE html>
<html lang="zh">

<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>
        .box {
            width: 71%;
            height: 500px;
            border: 1px solid green;
            margin-left: 10px;
        }

        input {
            width: 70%;
            height: 30px;
            border: 1px solid lightpink;
            outline: none;
            margin: 10px;
        }

        button {
            width: 100px;
            height: 30px;
            border: 1px solid lightpink;
            color: lightpink;
        }
    </style>
</head>

<body>
    <input type="text">
    <button>点击发送</button>
    <div class="box"></div>
    <script>
        var input = document.getElementsByTagName('input')[0]
        var btn = document.getElementsByTagName('button')[0]
        var box = document.querySelector('.box')
        //创建WebSocket对象
        var ws = new WebSocket('ws://127.0.0.1:8081')
        //启动socket服务
        ws.addEventListener('open', function () {
            box.innerHTML = '连接服务已启动~'
        })
        //接收数据
        ws.addEventListener('message', function (e) {
            box.appendChild(transformMsg(e))
        })
        //点击按钮发送数据
        btn.addEventListener('click', function () {
            var value = input.value
            input.value = ''
            ws.send(value)
        })

        //生成p标签
        function transformMsg(e) {
            var data = JSON.parse(e.data)
            console.log(data)
            var p = document.createElement('p')
            p.innerText = data.msg + '---' + data.time
            if (data.type === 0) {
                p.style.color = 'green'
            } else if (data.type === 1) {
                p.style.color = 'black'
            } else {
                p.style.color = 'red'
            }
            return p
        }
    </script>
</body>

</html>

后端通过引入nodejs-websocket依赖包，通过conn.on方法来监听消息接收，连接关闭及连接异常

//下载依赖
npm install nodejs-websocket

注意：聊天室的实现需要服务器接收到消息后对消息进行广播来实现，所以会通过server.connections.forEach来逐个发送消息

后端代码：

// 引入nodejs-websocket包
const ws = require('nodejs-websocket')

// 当前所处状态
const type_ENTER = 0 //进入聊天室状态
const type_DATA = 1 //发送信息状态
const type_LEAVE = 2 //离开聊天室状态
var count = 0 //当前用户数量
var server = ws.createServer(function (conn) {
    console.log("有用户连接了");
    count++
    conn.userName = `用户${count}`
    brodCast({
        type: type_ENTER,
        msg: `${conn.userName}进入了聊天室~`,
        time: new Date().toLocaleTimeString()
    })
    // 监听消息
    conn.on("text", function (str) {
        brodCast({
            type: type_DATA,
            msg: str,
            time: new Date().toLocaleTimeString()
        })
    })
    // 监听连接关闭
    conn.on("close", function (code, reason) {
        count--
        brodCast({
            type: type_LEAVE,
            msg: `${conn.userName}离开了聊天室~`,
            time: new Date().toLocaleTimeString()
        })
    })
    // 监听异常
    conn.on('error', () => {
        console.log("用户连接异常~");
    })
})

// 广播
function brodCast(msg) {
    server.connections.forEach(item => {
        item.send(JSON.stringify(msg))
    })
}
server.listen(8081, () => {
    console.log("websocket服务启动成功了~");
})

废话不多说，咱们来看一下效果：

当用户离开时：

websocket不仅可以实现聊天功能，还可以使用解决跨域问题，因为websocket不附属于浏览器的同源策略，而且它本身就有意被设计成可以跨域的一个手段。由于历史原因，跨域检测一直是由浏览器端来做，但是WebSocket出现以后，对于WebSocket的跨域检测工作就交给了服务端，浏览器仍然会带上一个Origin跨域请求头，服务端则根据这个请求头判断此次跨域WebSocket请求是否合法

以上就是关于websocket的介绍，希望能帮到大家！！！