websocket

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简易聊天室）