How to communicate between React CRA website and Arduino via Serial - reactjs

As the title says, I have a React "Create-React-App" project, run with npm. It is a flight data website.
The current setup is that it communicates with a Java WebSocket server. Previously, an Android app communicated with this WebSocket server and sensors would communicate with the phone to get to the website.
Now, I have replaced the phone with an Arduino Nano to reduce latency, and I'm wondering what the best pathway between the React project and a USB-plugged-in Arduino is. Obviously the Arduino has to communicate via serial. I have tried using the node serialport package in the React project but it does not work, as detailed here: https://github.com/serialport/node-serialport/issues/2297
One succesful pathway I've found is Arduino -> Python script that can read and write to serial, read and write as a Websocket Client -> Java Websocket Server -> React app.
I chose Python because it is my main language, whereas the Java server and React app are legacy code. The problem with this implementation is that I need 4 IDEs (Arduino, Python, Java, React) to develop and I have to run each package separately, so it is not convenient.
I'm looking for a shorter path. The Java server can die, but the React app and Arduino cannot. Any advice?

Related

implement a chat system with react - configuration required

Some years ago I implemented a websocket (Ruby based) on a intranet website to create a one direction message system. Admin types a message and all the clients that are registered on that channel get the message.
It is working well but now that I'm approaching REACTJS I am thinking about replacing the Ruby websocket with a React component.
Starting from an Apache webserver running php and a Ruby websocket in parallel to it what do I have to do to set up an environment running react?
Install Node on Ubuntu?
Install NPM?
What else?
On react side I'm currently learning the basics and I have not approached yet the differences in terms of application beside a compiled app and the dev version. So I expect that also the compiled version will require the same environment as when I am developing. Am I right?
React is solely a front-end/client-side technology, so it has very little to do with the server.
If you develop a React app using something like create-react-app, the development environment they provide allows you to disregard the backend/server-side while you develop. It does this by serving the files on a local webserver.
If you have a server that makes a web socket available, your React component can connect to it and use it.
After development the React code must be transpiled, and all you need is to serve the static files. For example you might end up with a chat.html file that uses styles.css and connect.js, and you'll need a server to respond to requests for those files.
So I would say that if you already have an exposed web socket, you do not need a new production environment on your server.
*If you intend to build a new websocket on Node or if you need to build yourself an additional REST API that's going to require setting up a Node environment on your server*

PC: C server application / Android: Java client application - connecting client/server applications which are not on the same network

I am developing a C application which will run on my computer (connected on a local router) to act as a server while allowing any device from the Internet to connect to it.
Also, I am developing an Android APK in Java which will be a client (using mobile data, for example), but this is not currently of relevance.
What I would like to do is for my C application to hold some data which can only be accessed via the client on the request. When user installs the APK on Android phone, login credentials are required and after that he/she has complete access to the server application and can get the necessary data or send the instructions to the server.
So far I have only programmed TCP/IP over LAN. I am interested in how can I create a C application that will live "online" not only "locally" as I would like to access it from different sources, not only LAN users.
Can anybody help with this and explain me what should I do? I am trying to avoid any libraries (if possible) because I'd like to learn more about Network programming.

Using Swagger to Manage Microservice Architecture Across IIS Express

I'm coming into an existing application where a single React application exists that calls multiple APIs. The APIs are written in .NET Core and I've been instructed they are typically hosted with IIS Express when debugging locally.
Where I'm running into trouble is understanding how the React application will hit the backend API projects, when the API projects are running on multiple IIS Express instances that don't have static ports.
For instance, I'll hit "run" on the React project which launches the React application along with a controller that might be running on localhost:5888. I can easily hit the controller from the React application using window.host + /Controller/ which will handle resolving the port for me. However, if I "run" another API, from a separate Visual Studio instance, it'll get hosted on a random port, something like localhost:5889. If I try to hit that API with window.host + /SecondAPIMethod/ from the React application, it'll come up with a 404 error, because the React app doesn't know what port the IIS express instance with the second API is running on.
I've been told by coworkers that Swagger is the key to managing this, but I'm unsure how.
It is not running on any random port. Port number is specified in the project properties. When you are debugging in visual studio, you can set the port number by going to project properties -> debug -> App URL.
When you deploy the web api on IIS Server, it will run on the port you have specified when configuring the web api.
Now when you know the web api (with port number) in advance, you can hard-code the url or put it in app settings file of your react app. Hope this helps.

How can I get codenameone client to work with a server supporting EventSource

I am working with codenameone and trying to build a client to connect to a server that is using the Eventsource API to send real time updates. I have the javascript sdk but would rather use something more native to codenameone. IS there any such thing? Or does Codenameone ConnectionRequest support EventSource?
At this time we don't have builtin support EventSource mostly because there is not that much demand for it. The only Java client side library for this I could find was this one: https://github.com/aslakhellesoy/eventsource-java/blob/master/src/main/java/com/github/eventsource/client/impl/netty/EventSourceChannelHandler.java
Which is problematic as we don't support those specific API's (netty).
Most developers who need low level event based communications are using WebSockets which we support well through https://github.com/shannah/cn1-websockets/
You can also use direct TCP streams etc.
In a native app you would normally use push notification to trigger an update from the server. This works well for apps that aren't running. You can learn more about our push notification support here.

Is it possible to use an Angular 2 Dart frontend with a Node.js backend?

I am planning out the tools I will use in my web app. I would like to use Node.js as a server backend because it has a module that would be particularly useful to me. However, I would also like to use Angular 2 (Dart) with Polymer.dart in the frontend. Excuse me if the answer should be obvious, but how will it work to combine these two parts of my app seamlessly (and without conversion tools), as is commonly done in the MEAN stack, since Dart is not directly compatible with JS?
There aren't any tutorials or resources currently available that demonstrate this combination. It seems to me the more common use case is to have Dart also act as a server backend.
How to serve a Dart client application
The client and server can be two distinct applications that are not bound to each other at all. The only connection that is required is, that the server can interpret the requests sent by the client and that the client can interpret the responses.
The built Dart client application is like static HTML and can be served by any HTTP server. I don't know Node.js, but I assume it has a directory where it serves static content from. This is where you place the build output of your Dart client application.
Communication between Dart client and Node.js server
For client and server to be able to communicate, Dart needs to send requests in the form the server expects. You can use REST, WebSocket, Ajax with JSON body or protocol buffers.
An advantage of using the same language on client and server is, that model classes that are serialized to or deserialized from the wire protocol format and the serialization/deserialization code can be shared between client and server. That's not possible in this case. The Dart team is working in generating JS and TS from Dart which might solve this eventually. If you use Protocol Buffers this also doesn't apply because you can generate the code for both languages from the same proto files.
Development requirements
For development you have to consider that you "need" two servers. The Node.js server that is the actual server for you application and also pub serve for fast change and reload cycles (to avoid building to JS after each change).
This is usually done by a proxy (can be Nginx for example or a custom Dart script using the shelf and shelf_proxy package) that forwards requests for Dart source files to pub serve and Rest/Ajax/WebSocket requests to your Node.js server.

Resources