websocket

  • Post author:
  • Post category:其他




websocket 的基本概念

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。



websocket的属性

Socket.readyState 表示连接状态

0 表示连接尚未建立

1 表示连接已建立,可以进行通信

2 表示连接正在进行关闭

3 表示连接已关闭或者连接不能打开



websocket的事件

open 连接建立时触发

message 客户端收到服务端数据时触发

error 通信发生错误时触发

close 连接关闭时触发



websocket基本使用过程

// 1、创建websocket服务
//  参数1:websocket的服务地址
var ws = new WebSocket("ws://echo.websocket.org");
// 2、open当服务连接成功是触发 
ws.addEventListener('open', function( ){
    div.innerHTML = '连接成功!'
})
// 3、 主动给websocket发消息
button.addEventListener('click', function(){
    // 要发送给服务器的数据,这里是把页面中input中输入的内容发给服务端
    var value = input.value
    ws.send(value)
})
// 4、 接收websocket服务的数据
ws.addEventListener('message', function(e) {
    console.log(e.data)
})
// 5、 服务异常
ws.addEventListener('error', ()=> {
    console.log('服务崩溃了~')
})



多页面使用要用到broadcast广播

A页面把数据发给服务端,服务端接收数据,服务端把数据发出去,B页面接收

聊天室的话就是一个页面把数据发到服务端,服务端通过broadcast广播把数据发个给个页面



服务端代码

const ws = require('nodejs-websocket')
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
/* 
    分析:
        消息应该室一个对象
            type:表示消息类型 0:用户进入聊天室   1:用户离开聊天室   2:正常的聊天消息
            msg: 消息的内容
            time: 聊天的具体事件
*/
let count = 0
const server = ws.createServer(coon => {
    console.log('新的连接')
    count++
    coon.userName = `用户${count}`
    broadcast({
        type: TYPE_ENTER,
        msg: `${coon.userName}进入了聊天室`,
        time: new Date().toLocaleTimeString() // 22:12
    })
    coon.on('text', data => {
        // 聊天的消息
        broadcast({
            type: TYPE_MSG,
            msg: data,
            time: new Date().toLocaleTimeString() // 22:12
        })
    })
    coon.on('close', data => {
        console.log('关闭连接')
        count--
        broadcast({
            type: TYPE_LEAVE,
            msg: `${coon.userName}离开了聊天室`,
            time: new Date().toLocaleTimeString() // 22:12
        })
     })
    coon.on('error', data => {
        console.log('服务异常')
    })
})

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

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


demo地址(websocket基础+websocket简易聊天室)



版权声明:本文为m0_45237165原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。