react中使用封裝websocket

websocket.js中
import { websocket } from "./Websocket"
import {message} from 'antd'
//import e from "express"

//websocket的四個回呼函式,onopen,onmessage,onerror,onclose

class createWebSocket {
    //myUrl = ''
    constructor(url){
        
        //this.instance = null
        //super(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

在組件中使用,利用服務器端傳來的值修改組件中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()
    }


利用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啟動這個服務器

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/60576.html

標籤：JavaScript

上一篇：小白求解

下一篇：計算機網路課后習題概略