React hook实现简单的websocket封装方式.docx

第

React?hook实现简单的websocket封装方式

const[isLocalPage,setIsLocalPage]=useState(true)

???const{wsData,readyState,closeWebSocket,reconnect}=useWebsocket({

?????url:ws://ip:端口,//此参数为websocket地址

?????verify//此参数控制是否有权限，请求该方法

????})

???useEffect(()={

?????//不在白名单人员之间不执行后续操作，不需要可以删除

?????if(!verify){

?????????return

?????}

?????

?????//接受到socket数据，进行业务逻辑处理

?????if(Object.keys(wsData).length!==0){

????????console.log(wsData)

?????}

?????

?????//如果是已关闭且是当前页面自动重连

?????if(readyState.key===3isLocalPage){

??????reconnect()

?????}

?????//不是当前页面清空webSocket此处为优化代码使用的，不需要可以直接删除。

?????if(!isLocalPage){

??????closeWebSocket()

?????}

????},[wsData,readyState,isLocalPage,verify])

?}

对于isLocalPage感兴趣可以看下面代码是判断用户是否在当前页面。此方法可以放在useEffect。

/*

?**判断用户是否离开当前页面，离开后不请求轮询接口，回到当前页面重新执行轮询

useEffect(()={

???document.addEventListener(visibilitychange,function(){

?????//页面变为不可见时触发

?????if(document.visibilityState===hidden){

???????setIsLocalPage(false)

?????}

?????//页面变为可见时触发

?????if(document.visibilityState===visible){

???????setIsLocalPage(true)

?????}

???})

?})

最后，在这个代码中没有涉及到的场景就是心跳机制，一般简单的需求可以不考虑，这块逻辑实现上也比较简单，这里就不多加阐述了。

react自定义hook解决websocket连接,useWebSocket

react自定义hook,useWebSocket

1、描述

本来项目的告警和消息提醒是用的接口30秒调用一次，这次要改成webSocket传输。

因为前端是用的https，后端用的http，后端的socket只支持ws不支持wss,这里使用了webpack-dev-server的proxy代理了一下。

target：ws目标地址、pathRewrite:地址重写，这里是把/aapp_socket重写成aapp/websocket,ws：是否开启socket,secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false，changeOrigin：是否跨域。差不多就这个意思

?/aapp_socket:{

????????target:`ws://xxx.xxx.xxx/`,

????????pathRewrite:{

??????????^/aapp_socket:aapp/websocket,

????????},

????????ws:true,

????????secure:false,

????????changeOrigin:true,

??????},

使用连接的地址:

`wss://localhost:3000/aapp_socket`;

实际