本来,在 JS 或者是 Node 中使用 WebSocket 都是很简单的问题。但是,想用 React Native 进行开发的时候,使用其自带的 WebSocket 库,就出现很多的问题。
一般的使用办法
const WebSocket = require("ws"); let socket = new WebSocket("ws://127.0.0.1:8888", "ascii"); socket.onopen = (e) => {}; socket.onmessage = (e) => { console.log(e.data.toString()); socket.send("json"); };
socket.onclose = (e) => console.log(e.code, e.reason); socket.onerror = (e) => console.log(e.message);
|
OK,如果这个用 Node 中的 ws 库来跑,没有任何问题。
但是用 React Native 的问题就出现了
问题
onmessage 数据为空
在这个回调中,收到的事件,其返回的数据,当服务器是传输的二进制的数据,而不是字符串的时候,返回的会是一个空的 ArrayBuffer,拿不到任何数据。
原因:ReactNative 不支持二进制数据。
解决办法:
let socket = new WebSocket(cfg.HOST, cfg.PROTOCOL); socket.binaryType = "blob"; socket.onopen = (e) => { console.log("open"); }; socket.onmessage = (e) => { console.log(e.data); var reader = new FileReader(); reader.readAsText(e.data, "UTF-8"); reader.onloadend = (ev) => { store.dispatch(serverMsgCreator(reader.result)); }; };
socket.onclose = (e) => console.log(e.code, e.reason); socket.onerror = (e) => console.error(e.message);
|
采用 blob,格式,然后读成文本。感觉这样效率挺低的。