WebSocket的基本使用

一. 后端

1.安装包

npm i ws -S

2.创建对象

const WebSocket = require('ws')

// 创建WebSocket服务端的对象, 绑定的端口号是9998

const wss = new WebSocket.Server({

        port: 9998

})

3.监听事件

①连接事件

wss.on('connection', client => { 

        console.log('有客户连接了 ‘)

}）

②接收数据事件

wss.on('connection', client => { 

        console.log('有客户连接了 ')

        client.on('message',async msg => {

                   console.log('客户端发送数据给服务端了')

        }）

}）

4.发送数据

client.send(JSON.stringify(payload))

二. 前端

1.创建对象

ws = new WebSocket('ws://localhost:9998')  //'ws://localhost:9998' 为 服务端的路径

2.监听事件  websocket_demo.html文件中：

①连接成功事件

ws.onopen = () => {

        console.log('连接服务端成功了...')

        send.disabled = false    //发送数据按钮禁用

}

②接收数据事件

ws.onmessage = msg => {

        console.log('接收到从服务端发送过来的数据了')

        console.log(msg)

        recv.innerHTML = msg.data

}

③关闭连接事件

ws.onclose = () => {

        console.log('连接服务器失败')

        send.disabled = true  //发送数据按钮启用

}

3.发送数据

ws.send(JSON.stringify({

        action: 'themeChange',

        socketType: 'themeChange',

        chartName: '',

        value: 'chalk'

}))

4.约定好和客户端之间数据交互的格式和含义

客户端发送数据给服务端的字段如下:

{
    "action": "getData",
    "socketType": "trendData",
    "chartName": "trend",
    "value": ""
}

action : 代表某项行为,可选值有：
    getData 代表获取图表数据
    fullScreen 代表产生了全屏事件
    themeChange 代表产生了主题切换的事件
socketType : 代表业务模块类型, 这个值代表前端注册数据回调函数的标识, 可选值有: 
    trendData sellerData mapData rankData hotData stockData fullScreen themeChange     chartName : 代表图表名称, 如果是主题切换事件, 可不传此值, 可选值有:
    trend seller map rank hot stock 
value : 代表 具体的数据值, 在获取图表数据时, 可不传此值, 可选值有：
    如果是全屏事件, true 代表全屏, false 代表非全屏
    如果是主题切换事件, 可选值有 chalk 或者 vintage

服务端发送给客户端的数据如下 :

{
    "action": "getData",
    "socketType": "trendData",
    "chartName": "trend",
    "value": "",
    "data": "从文件读取出来的json文件的内容"
}