WebSocket搭建服务器

WebSocket建立在TCP协议上，可以实现浏览器与服务器全双工通信。服务器可以主动发消息给客户端，实现实时推送。与http不同，websocket是一种持久协议。

WebSocket 教程 - 阮一峰的网络日志 (ruanyifeng.com)

nodejs使用websocket可以实现基本服务器搭建：

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

// 1.用户连接服务器自动调用函数，每连接一个用户会创建connect对象
const server = ws.createServer(connect=>{
    console.log("用户已连接")
	broadcast("用户进入聊天")
    // 2.服务器接收浏览器用户数据
    connect.on('text',data => {
	broadcast(data)
    })
    // 3.用户与服务器链接断开
    connect.on('close',()=>{
        console.log("用户已断开")
        broadcast("用户已退出聊天")
    })
    // 4.error事件处理用户错误信息
    connect.on('error',()=>{
        console.log("链接异常")
    })
})

// 服务器监听端口
server.listen(PORT,()=>{
    console.log('启动成功,端口'+PORT)
})

// 广播函数，向所有连接服务器的用户发送内容
function broadcast(msg){
    // server.connections 所有用户
    server.connections.forEach(item =>{
        item.send(msg)
    })
}

启动服务器后，用户端通过WebSocket对象以事件处理形式与服务器进行交互：

let input = document.querySelector('input')
let button = document.querySelector('button')
let re = document.querySelector('#list')
let ws = new WebSocket("ws://localhost:3000")
// 链接成功
ws.addEventListener('open',()=>{re.innerHTML = '链接成功'})
// 链接断开
ws.addEventListener('close',()=>{re.innerHTML = '链接断开'})
// 读取input内容并发送数据
button.addEventListener('click',()=>{
    let value = input.value
    ws.send(value) //发送数据
    input.value = ''
})

// 接收数据
ws.addEventListener('message',(response)=>{
    console.log(response.data)
    // 添加新元素并显示
    let newData = document.createElement('div')
	newData.innerHTML = response.data
    re.appendChild(newData)
})