react中封装websocket_react完成webscoket 的心跳检测以及组件的独立封装的代码

websocket.js中

//import e from “express”

//websocket的四个回调函数,onopen,onmessage,onerror,onclose

import { websocket } from "./Websocket"
import {message} from 'antd'
class createWebSocket {

constructor(url){

    this.connect(url)
    //console.log(url)
    this.myUrl = url
    //this.getMessage()
}

connect(url){//连接服务器
    this.ws = new WebSocket(url)
    this.ws.onopen = (e) =>{
        this.status = 'open'
        message.info('link succeed')
        console.log("connection to server is opened")
        //this.heartCheck.reset().start()
        this.ws.send('succeed')
        this.heartCheck()
    }
}
async getMessage (){//异步获取数据
    this.lockReconnect = true
    this.messageList = '';
    await new Promise((resolve) =>{
        this.ws.onmessage = (e) =>{
            //console.log(e.data)
            this.messageList = e.data
            //console.log(this.messageList)
            resolve()
        }
    })
    console.log(this.messageList)
    return this.messageList
}

heartCheck () {//心跳
    this.pingPong = 'ping'
    this.pingInterval = setInterval(() => {
        if(this.ws.readyState === 1){
            this.ws.send('ping')
        }
    }, 10000);
   this.pongInterval = setInterval(()=>{
       if(this.pingPong === 'ping'){
           this.closeHandle('pingPong没有改为pong')
       }
       console.log('return the pong')
   },20000) 
}
closeHandle(res){
    if(this.status !== 'close'){
        console.log('断开，重连websocket',res)
        if(this.pongInterval !== undefined && this.pingInterval !== undefined){
            clearInterval(this.pongInterval)
            clearInterval(this.pingInterval)
        }
        this.connect(this.myUrl)
    }else{
        console.log('websocket手动关闭了，或者正在连接')
    }
}

close(){//关闭连接
    clearInterval(this.pingInterval)
    clearInterval(this.pongInterval)
    this.ws.send('close')
    this.status = 'close'
    this.ws.onclose = e =>{
        console.log('close')
    }
}
}
export default createWebSocket
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

在组件中使用,利用服务器端传来的值修改组件中state的值

import createWebSocket from '../WebSocket'
ws = new createWebSocket('ws:...')
componentDidMount(){
    //this.test()
    //console.log('xxxx')
    this.ws.getMessage().then((res)=>{
        console.log(res)
        this.setState({data:res})
    })
}
componentWillUnmount(){
    this.ws.close()
}
1
2
3
4
5
6
7
8
9
10
11
12
13

利用node配一个本地服务器
server.js中
const WebSocket = require(‘ws’)
const express = require(‘express’)
const app = express()
app.listen(3003)

const wss = new WebSocket.Server({port:8989})
console.log(‘the connection is starting’)
wss.on(‘connection’,function(ws){
console.log(‘client connected’)
ws.on(‘message’,function(message){
console.log(‘received :’,message)
ws.send(‘hello world’)
})
})

在控制台node server.js启动这个服务器