websocket实现简易聊天室

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

 

 

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

前端准备：

    
    
    
    
    



    
    点击发送
    

    

后端通过引入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的介绍，希望能帮到大家 ！！！