Expo and React Native OBD2 Wifi. Connecting using a WebSocket

Question

I bought a generic obd2 wifi reader that works fine with other applications from the App Store. I've confirmed the ip and port to be: 192.168.0.10 and 35000 using said apps. I want to build a simple HUD mobile app using Expo and React Native since I don't have an Apple Developer Licence and so I like using Expo because of the ease of use. The iPhone is my daily driver.

Now I'm trying to establish a connection and the connection always hangs and no callbacks are called... I get the following message on onerror a few moments later (times out): The operation couldn't be completed. Socket is not connected. I've also, for testing purposes, download and ran the following repo: https://github.com/ezobd/sim So that I wouldn't have to go to the car to test. But when I try to connect to this one I actually get a onError callback pretty quick with the following message: "Invalid Sec-WebSocket-Accept response". The server outputs the headers of the /GET but nothing else. I was under the impression that using this approach would work but it doesn't... I'll share the code of the connect function that is called when the user presses a button:

 const connect = () => {
    if(connectionStatus === 'disconnected') {
      setConnectionStatus('connecting');
      const newWs = new WebSocket(`ws://${ip}:${port}`, "tcp"); // also tried without the "tcp" protocol
      const currentTime = new Date().getTime();
      newWs.onopen = () => {
        console.log("ws opened");
        Alert.alert("Connection established in " + (new Date().getTime() - currentTime) + "ms");
        setWs(newWs); // Update the value of ws using setWs
        setConnectionStatus('connected');
      };
      newWs.onmessage = (e) => {
        // A message was received
        console.log(e.data);
        Alert.alert("Message received: " + e.data);
      };
      newWs.onerror = (e) => {
        // An error occurred
        console.log(e);
        setConnectionStatus('disconnected');
        Alert.alert("Connection failed with error " + e.message);
      };
      newWs.onclose = () => {
        console.log("ws closed");
        setConnectionStatus('disconnected');
        Alert.alert("Connection closed");
      };
    }
    else {
      Alert.alert("Connection is already being established");
    }
  };

My repo is the following: https://github.com/bearkillerPT/obd2-speedometer-wifi Thanks in advance!

score 0 · Answer 1 · answered Jul 13 '23 at 14:27

This obd server is not designed to handle WebSocket connections, which is why you're seeing the HTTP GET request when you try to connect with a WebSocket.

WebSockets and TCP sockets are not the same. A WebSocket connection starts with an HTTP handshake, which upgrades to a WebSocket connection. This is not the case with a raw TCP socket connection, which is what your server is expecting.

If you want to connect to this server from your React Native app, you should use a TCP socket connection, not a WebSocket connection. Unfortunately, React Native does not support raw TCP socket connections out of the box.

There are some libraries available that add this functionality to React Native, such as react-native-tcp. You can use this library to create a TCP socket connection from your React Native app to your server. This library isn't supported by Expo and so it doesn't solve my problem. I understand that if you have a mac running macOS >= 13 you can compile the application into an .ipa file without signing it. I hate Apple.

Expo and React Native OBD2 Wifi. Connecting using a WebSocket

1 Answers1