WebSocket React Native: A Complete Guide to Real-Time Communication (2025)

1const ws = new WebSocket("wss://echo.websocket.org");
2
3ws.onopen = () => {
4  ws.send("Hello from React Native!");
5};
6
7ws.onmessage = e => {
8  console.log("Received:", e.data);
9};
10
11ws.onerror = e => {
12  console.error("WebSocket Error:", e.message);
13};
14
15ws.onclose = e => {
16  console.log("WebSocket closed", e.code, e.reason);
17};
18

1import io from "socket.io-client";
2
3const socket = io("wss://yourserver.com");
4
5socket.on("connect", () => {
6  socket.emit("join", { user: "Alice" });
7});
8
9socket.on("message", (msg) => {
10  console.log("Message received:", msg);
11});
12
13socket.on("disconnect", () => {
14  console.log("Disconnected from server");
15});
16

1import React, { useState, useEffect } from "react";
2import { View, TextInput, Button, FlatList, Text } from "react-native";
3
4export default function ChatScreen() {
5  const [ws, setWs] = useState(null);
6  const [message, setMessage] = useState("");
7  const [messages, setMessages] = useState([]);
8
9  useEffect(() => {
10    const socket = new WebSocket("wss://echo.websocket.org");
11    setWs(socket);
12    socket.onmessage = e => {
13      setMessages(prev => [...prev, { text: e.data, sender: "server" }]);
14    };
15    return () => socket.close();
16  }, []);
17
18  const sendMessage = () => {
19    if (ws && message) {
20      ws.send(message);
21      setMessages(prev => [...prev, { text: message, sender: "me" }]);
22      setMessage("");
23    }
24  };
25
26  return (
27    <View style={{ flex: 1, padding: 16 }}>
28      <FlatList
29        data={messages}
30        renderItem={({ item }) => <Text>{item.sender}: {item.text}</Text>}
31        keyExtractor={(item, idx) => idx.toString()}
32      />
33      <TextInput value={message} onChangeText={setMessage} />
34      <Button title="Send" onPress={sendMessage} />
35    </View>
36  );
37}
38

1useEffect(() => {
2  const socket = new WebSocket("wss://echo.websocket.org");
3  // ... setup listeners ...
4  return () => {
5    socket.close(); // Clean up on unmount
6  };
7}, []);
8

1class WebSocketService {
2  static instance = null;
3  socket = null;
4
5  static getInstance() {
6    if (!WebSocketService.instance) {
7      WebSocketService.instance = new WebSocketService();
8    }
9    return WebSocketService.instance;
10  }
11
12  connect(url) {
13    if (!this.socket) {
14      this.socket = new WebSocket(url);
15    }
16    return this.socket;
17  }
18}
19
20// Usage
21const wsService = WebSocketService.getInstance();
22const ws = wsService.connect("wss://yourserver.com");
23

1function useReconnectingWebSocket(url) {
2  const [ws, setWs] = useState(null);
3  useEffect(() => {
4    let socket;
5    let retryTimeout;
6    function connect() {
7      socket = new WebSocket(url);
8      socket.onclose = () => {
9        retryTimeout = setTimeout(connect, 3000); // Retry in 3s
10      };
11      setWs(socket);
12    }
13    connect();
14    return () => {
15      clearTimeout(retryTimeout);
16      socket && socket.close();
17    };
18  }, [url]);
19  return ws;
20}
21

1let debounceTimeout;
2function handleMessage(data) {
3  clearTimeout(debounceTimeout);
4  debounceTimeout = setTimeout(() => {
5    // Process message
6  }, 50);
7}
8