React Native Expo не получает данные c помощью websocket
Я пытаюсь написать свой чат на react native expo c помощью websocket. В функции socket.onmessage в event.data почему-то пустой массив.
socket.onmessage = (event) => {
console.log(event);
messages.push({ text: event.data, isMyMsg: false });
setMessages(messages);
};
Так же я пробовал переделать с помощью Blob:
useEffect(() => {
const socket = new WebSocket(WS_URL);
socket.binaryType = "blob";
socket.onopen = () => {
console.log("Соединение установлено");
setIsConnected(true);
setWs(socket);
};
socket.onmessage = async (event) => {
const blob = event.data;
console.log(event);
if (blob instanceof Blob) {
const text = await blob.text(); // Преобразуем Blob в текст
console.log("Получено сообщение:", text);
messages.push({ text: text, isMyMsg: false });
setMessages(messages);
} else {
console.error("Неизвестный формат сообщения:", blob);
}
};
socket.onclose = () => {
console.log("Соединение закрыто");
setIsConnected(false);
};
socket.onerror = (error) => {
console.error("Ошибка соединения:", error);
};
return () => {
socket.close();
};
}, []);
Здесь код останавливается на строчке const text = await blob.text() и дальше не выполняется. Я пробовал подключать клиент на обычном js к серверу и он нормально работал получал и отправлял сообщения. Скорее всего проблема в React Native expo, но я не понимаю как ее решить.
весь код:
chat_content.tsx
import { View, FlatList, Text } from "react-native";
import React, { useEffect, useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import Message from "@/components/Message";
import FormField from "@/components/FormField";
import { useLocalSearchParams } from "expo-router/build/hooks";
import { IChatView } from "@/components/Chat";
export interface IMessage {
isMyMsg: boolean;
text: string;
}
const WS_URL = "myurl";
const ChatContent = () => {
const data = useLocalSearchParams()["data"];
const chatView: IChatView = JSON.parse(decodeURIComponent(data as string));
const [messages, setMessages] = useState<Array<IMessage>>([]);
const [value, setValue] = useState("");
const [ws, setWs] = useState<WebSocket | null>(null);
const [isConnected, setIsConnected] = useState(false);
const sendMessage = (msg: string) => {
if (ws && ws.readyState === WebSocket.OPEN && msg !== "") {
ws.send(msg);
messages.push({ text: msg, isMyMsg: true });
setMessages(messages);
setValue("");
}
};
useEffect(() => {
const socket = new WebSocket(WS_URL);
socket.onopen = () => {
console.log("Соединение установлено");
setIsConnected(true);
setWs(socket);
};
socket.onmessage = (event) => {
console.log(event);
messages.push({ text: event.data, isMyMsg: false });
setMessages(messages);
};
socket.onclose = () => {
console.log("Соединение закрыто");
setIsConnected(false);
};
socket.onerror = (error) => {
console.error("Ошибка соединения:", error);
};
return () => {
socket.close();
};
}, []);
return (
<SafeAreaView className="h-full pb-2 px-2 flex-col justify-end">
<View
className="
absolute
w-[100vw]
right-[-50%]
translate-x-[-4%]
overflow-hidden
top-1
h-10
z-10
"
>
<Text className="font-semibold text-xl">{chatView.name}</Text>
</View>
<FlatList
inverted={true}
contentContainerStyle={{ flexDirection: "column-reverse" }}
data={messages}
renderItem={({ item }) => (
<Message isMyMsg={item.isMyMsg} text={item.text} />
)}
/>
<View>
<FormField
fieldStyles="bg-white"
inputStyles="text-black font-semibold text-xl"
titleStyle=""
title="Message"
value={value}
handleChangeText={(e) => setValue(e)}
sendMessage={() => sendMessage(value)}
/>
</View>
</SafeAreaView>
);
}
export default ChatContent;
server.js
const WebSocket = require("ws");
const ws = new WebSocket("myurl");
ws.on("open", function open() {
console.log("Соединение установлено");
ws.send("Тестовое сообщение");
sendMessage();
});
ws.on("message", function incoming(data) {
console.log(`Сообщение от сервера: ${data}`);
});
ws.on("close", function close() {
console.log("Соединение закрыто");
});
ws.on("error", function error(err) {
console.error("Ошибка:", err.message);
});
function sendMessage() {
const readline = require("readline").createInterface({
input: process.stdin,
output: process.stdout,
});
readline.on("line", (message) => {
if (message === "/quit") {
console.log("Выход...");
ws.close();
readline.close();
return;
}
ws.send(message);
readline.prompt();
});
}
Работающий client.js
const WebSocket = require("ws");
const ws = new WebSocket("myurl");
ws.on("open", function open() {
console.log("Соединение установлено");
ws.send("Тестовое сообщение");
sendMessage();
});
ws.on("message", function incoming(data) {
console.log(`Сообщение от сервера: ${data}`);
});
ws.on("close", function close() {
console.log("Соединение закрыто");
});
ws.on("error", function error(err) {
console.error("Ошибка:", err.message);
});
function sendMessage() {
const readline = require("readline").createInterface({
input: process.stdin,
output: process.stdout,
});
readline.on("line", (message) => {
if (message === "/quit") {
console.log("Выход...");
ws.close();
readline.close();
return;
}
ws.send(message);
readline.prompt();
});
}