重新加載應用程序時WebSocket未關閉（React Native）

我正在使用React Native的WebSocket並且存在一些問題。當我刷新應用程序時，我發現之前的WebSocket連接（在刷新之前使用）仍然存在，但未正確關閉。每次我重新加載應用程序，它都會建立新的連接。然後關閉應用程序，它將所有連接釋放到一起。重新加載應用程序時WebSocket未關閉（React Native）

當我使用瀏覽器測試幾乎相同的代碼時，刷新頁面時，套接字會自動關閉並在頁面加載時創建新的WebSocket。

如果此問題在生產環境中仍存在，則可能非常關鍵。

這是服務器端代碼（我用快遞-WS）：

const sockets = {}; 

app.ws('/', (socket, req) => { 
    // Generate unique id to socket and save to socket list 
    const uid = uuid.v4(); 
    socket.uid = uid; 

    console.log(`Socket ${uid} connected.`); 
    sockets[uid] = socket; 

    socket.on('message', (data) => { 
     broadcast(data); 
    }); 
    socket.on('close',() => { 
     console.log(`Socket ${uid} disconnected.`); 
     delete sockets[uid]; 

     broadcast({ 
      type: 'plain', 
      message: `User ${socket.username} leaved the channel.` 
     }); 
     socket = null; // make sure to remove socket 
    }); 
});

服務器只是保存在連接收到的WebSocket，和關閉時刪除它。你可以看到，我登錄套接字ID，我得到了連接的識別每個WebSocket的方便的時候做，它看起來像這樣（使用節點UUID）：

Socket d0b62d3a-2ed9-4258-9d2d-e83a3eb99e6c disconnected.

好吧，當我測試了服務器與Web瀏覽器，它運作良好。每次刷新都成功關閉套接字並創建新套接字。

但是對於React Native，在刷新應用程序時，套接字永不關閉。幾個刷新後，終於退出應用程序，突然這些消息均顯示在控制檯上一次：

Socket d0b62d3a-2ed9-4258-9d2d-e83a3eb99e6c disconnected. 
Socket 2e1a2bba-ac64-4368-aeca-a02721f28ce5 disconnected. 
Socket 6673c9a3-9667-425a-8923-efbc40196226 disconnected. 
Socket 08fee145-e9bf-4af0-a245-dda2fe6a8e56 disconnected. 
Socket 55ce1926-d7fa-488b-92d9-ff3dea874496 disconnected. 
Socket 9c4c166d-d6d6-4a11-b400-a3eac51ab91f disconnected. 
Socket 9f6db512-649c-440e-8b88-9a77d20e1943 disconnected. 
Socket a9e6c0bd-419c-40af-865a-2573eca26a0f disconnected. 
Socket 70835c7a-3230-4e20-b133-b6c2942dff22 disconnected. 
Socket 5c83d81c-c0f1-4b9a-b5fb-7f09430a2f09 disconnected. 
Socket 4f11aea4-d0ad-4e2b-9613-9e994657ecaf disconnected.

下面的代碼的WebSocket處理我的陣營原生應用程序的一部分。

import store from './store'; 
import * as ChatActions from './actions/Chat'; 
import * as NetworkActions from './actions/Network'; 

const socket = null; 

export function init() { 
    socket = new WebSocket('ws://mywebsite.com:3300'); 

    socket.onopen =() => { 
     store.dispatch({ 
      type: NetworkActions.NETWORK_SOCK_CONNECTED, 
      data: {} 
     }); 
    }; 

    socket.onmessage = (e) => { 
     var data = e.data; 
     try { 
      data = JSON.parse(e.data); 
     } 
     catch(err) {} 

     store.dispatch({ 
      type: ChatActions.CHAT_RECV, 
      data: data.message 
     }); 
    }; 

    socket.onclose = (e) => { 
     store.dispatch({ 
      type: NetworkActions.NETWORK_SOCK_CLOSED, 
      data: {} 
     }); 
    }; 
} 

export function send(data) { 
    data = typeof data === 'object' ? JSON.stringify(data) : data; 
    socket.send(data); 
}

如果我應該關閉套接字前手動結束手動，任何人都知道這一點，請給我一些建議。我對React Native並不瞭解，並且沒有在Google上找到相關的帖子，所以它會非常感激它給我們一些建議。謝謝！

P.S.哦，我用Android進行測試。

來源

2016-11-12 modernator

你的代碼看起來不錯。刷新你的意思是在調試模式下運行時刷新javascript？這應該不會發生在生產中，JavaScript存儲在設備上。

如果您需要明確地關閉連接時，應用程序在後臺運行，請上網：

http://facebook.github.io/react-native/docs/appstate.html

然後就可以調用ws.close()當應用程序在後臺:)

來源

2016-11-13 15:24:59

謝謝！正如你所說，在構建爲生產模式後，它工作正常。並感謝您提供其他有用的信息。 :) – modernator

重新加載應用程序時WebSocket未關閉（React Native）

回答

相關問題