Is it possible to combine React Native with socket.io - ios

I was working on an app with Phonegap + React.js and Socket.io. However, then React-Native got released and the native feel is amazing.
I tried getting socket.io-client working with React Native, but unfortunately without much success. I did some research and I'm getting the exact same errors as described in this issue: https://github.com/facebook/react-native/issues/375
The comments on the issue said to try and use the fetch API to fetch JS modules, but I think I'm doing this wrong:
var socketScript;
fetch('https://cdn.socket.io/socket.io-1.2.0.js')
.then(function(response) {
socketScript = response._bodyText;
}).done(function() {
var socket = socketScript.io();
});
This returns an undefined is not a function.
Is there any way to make socket.io-client work with React Native? Or am I looking at this the wrong way? Perhaps there are other, better suited solutions?

For those like me stumbling across this question looking how to integrate socket.io with react native.
Since React Native has supported websockets for a short time now, you can now set up web sockets really easily with Socket.io. All you have to do is the following
npm install socket.io-client
first import react-native
assign window.navigator.userAgent = 'react-native';
import socket.io-client/socket.io
in your constructor assign this.socket = io('localhost:3001', {jsonp: false});
So in all it should look like this after npm installing socket.io-client:
import React from 'react-native';
// ... [other imports]
import './UserAgent';
import io from 'socket.io-client/socket.io';
export default class App extends Component {
constructor(props) {
super(props);
this.socket = io('localhost:3001', {jsonp: false});
}
// now you can use sockets with this.socket.io(...)
// or any other functionality within socket.io!
...
}
and then in 'UserAgent.js':
window.navigator.userAgent = 'react-native';
Note: because ES6 module imports are hoisted, we can't make the userAgent assignment in the same file as the react-native and socket.io imports, hence the separate module.
EDIT:
The above solution should work, but in the case it doesn't try create a separate socketConfig.js file. In there import anything that is needed, including const io = require('socket.io-client/socket.io'); and having window.navigator.userAgent = 'react-native'; BEFORE requiring socket.io-client. Then you can connect your socket there and have all listeners in one place. Then actions or functions can be imported into the config file and execute when a listener receives data.

Now, if you want to use socket.io in your RN app, you must use this code:
if (!window.location) {
// App is running in simulator
window.navigator.userAgent = 'ReactNative';
}
// This must be below your `window.navigator` hack above
const io = require('socket.io-client/socket.io');
const socket = io('http://chat.feathersjs.com', {
transports: ['websocket'] // you need to explicitly tell it to use websockets
});
socket.on('connect', () => {
console.log('connected!');
});
Big thanks for Eric Kryski.

import { io } from 'socket.io-client'
const socket = io(`${SOCKET_URL}:${SOCKET_PORT}`)
Important! SOCKET_URL should be your local IP address, not localhost or 127.0.0.1.
To check your local IP:
Mac / Linux: run ifconfig in terminal
Windows: run ipconfig --all in shell
Should be something like: const socket = io('http://10.0.1.6:3000', {transports: ['websocket']})

Short of a polyfill for the WebSocket API, you can create a native module that makes use of web-sockets and send events to Javascript using eventDispatcher.
On the Javascript side, you would subscribe to these events using DeviceEventEmitter.addListener.
For more information on using native modules, see the react-native doc on the topic

Edit Feb 2016: React Native now supports Web Sockets so some of this advice is invalid.
You've misinterpreted the Github issue I'm afraid. In it, aackerman says:
For this specific case you'll likely want to use the fetch API which
is provided by the environment.
He doesn't say that you should use the fetch API to grab remote JS modules. What he's suggesting is that the fetch API be used in place of the built-in Node.JS request module, which isn't available in React Native.
Let's look at your code:
socketScript = response._bodyText;
var socket = socketScript.io();
Think about this for a second - socketScript isn't a JavaScript object, it's a string - therefore how can you call the io method on it?
What you'd really need to do is parse _bodyText before using it (in a browser you could use eval), but then you'd still have the problem that while React Native has a polyfill for XHR and the fetch API, it doesn't yet have one for the WebSocket API. Unless I'm mistaken, this means you're stuck.
I suggest opening a Github issue to request a WebSocket API polyfill and ask for the thoughts of the community. Someone might have a workaround.

Although you can use socket.io-client lib, the community is complaining about compatibility issues with most versions (I did experience some). It works, but now I'm afraid to upgrade the lib because I need to verify the compatibility of the next version to my server's version and react-native's version!
It seems that a lot of people miss react's own implementation of Websockets! I really recommend you use this instead of socket.io-client. It is very similar in usage:
var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => { // connection opened ws.send('something'); // send a message};
ws.onmessage = (e) => { // a message was received console.log(e.data);};
ws.onerror = (e) => { // an error occurred console.log(e.message);};
ws.onclose = (e) => { // connection closed console.log(e.code, e.reason);};

Finally found it.
Client
import { io } from "socket.io-client/build/index"
io("ws://<LOCAL HOME NETWORK IP>:<PORT ON SERVER>")
Server
import express from "express"
import http from "http"
import * as SocketIO from "socket.io"
const app = express()
const server = new http.Server(app)
const io = new SocketIO.Server(server)
const port = 8000
io.on("connection", socket => {
console.log("CONNECTIONS")
}

may be this will through error
import io from "socket.io-client/socket.io"
Then just add below line....
import io from "socket.io-client/dist/socket.io";
then in componenDidMount or useEffect function just add below line.Never use it under constructor of class component.
var socket = io("https://localhost.com:3000", { jsonp: false });
// client-side
socket.on("chat_message", (msg) => {
console.log(msg);
});

2022 Answer
In 2022 you can easily just use the latest version of socket.io-client with React Native.
npm install socket.io-client
import io from 'socket.io-client';
Right now there isn't a good hook based socketIO libary that I've been able to make work with RN but it's pretty straightforward to roll out your own custom hook depending on your needs. IE
function useWebsocket(url) {
const [connected, setConnected] = useState(false);
const [socket, setSocket] = useState(null);
useEffect(()=>{
const newSocket = io(url);
newSocket.on('connect', ()=>setConnected(true));
newSocket.on('disconnect', ()=>setConnected(false));
setSocket(newSocket);
}, [])
return {
connected,
socket,
}
}
Something like this can get you started. This would open a socket for each component that calls the hook, which can work well if you just need one component with one connection. Sharing the connection across components gets a little more hairy but it isn't too bad.
The connected state is really useful for letting your user know the status of connections and stuff like that.
But yeah, point is you can just install it and use it in your component. Don't use it in the body of your functional components

Related

analyzer_plugin generates Legacy protocol of Dart analyzer server instead of LSP

I try to write some custom lint rules. To achieve this, I used the analyzer_plugin package and I set up my project as it should be. Here is a simplified excerpt of the main class :
class LintAnalyzerPlugin extends ServerPlugin {
#override
Future<void> analyzeFile({required AnalysisContext analysisContext, required String path}) async {
channel.sendNotification(
AnalysisErrorsParams(path, [getAnalysisError(path)]).toNotification(),
);
}
}
channel.sendNotification is called but no message is displayed into VS Code Problems panel.
After some investigation, I found out that the JSON generated for the sent notification use Dart server Legacy protocol. But the Dart analyzer server run by Dart Code extension wait for LSP (Microsoft Language Server Protocol).
Fortunately the extension offers a setting to start the server with the Legacy protocol:
"dart.useLegacyAnalyzerProtocol": true
And now the VS Code Problems panel populates sent notifications.
Unfortunately Dart Code extension advises to use LSP because the Legacy protocol will eventually be removed some day.
Is it possible to generate LSP? Or did I miss something?
If anyone has any suggestions, I'm all ears.

Dart Functions Framework usage

I'm new to the Dart functions framework. My goal is to use this package to create several functions and deploy them to Cloud Run (in combination with Firebase, but I guess that's irrelevant to this question).
I've run the quick starts and I've read all of the contents in the docs.
The quick start mentions just one function at a time (e.g. Hello World, Cloud Events, etc..), like this:
import 'package:functions_framework/functions_framework.dart';
import 'package:shelf/shelf.dart';
#CloudFunction()
Response function(Request request) {
return Response.ok('Hello, World!');
}
But as you can see in the quickstarts only one function is handled in a project at a time. How about me wanting to deploy several functions? Should I:
Write several functions in the same project / file, so that the function framework compiles the 'server.dart` by itself
OR
Create a different functions_framework for each function?
Let me be more specific. Should I do the following (option 1 - which makes more sense to me):
import 'dart:math';
import 'package:functions_framework/functions_framework.dart';
import 'package:shelf/shelf.dart';
#CloudFunction()
Response function(Request request) {
return Response.ok('Hello, World!');
}
#CloudFunction()
Response function2(Request request) {
if (Random().nextBool()) {
return Response.ok('Hello, World!');
} else {
return Response.internalServerError();
}
}
Or should I build a different folder by running a build_runner for each function I need in my project?
Is there a difference and/or a best practice?
Thanks in advance.
EDIT. This question is related to the deployment on Cloud Run itself, and not just testing on my own PC. To test my own functions I did the following:
Run dart run build_runner build, so that it updates the server.dart file correctly (I can see that the framework does a lot behind the scenes and that the _nameToFunctionTarget is basically a router);
Run the server in two different terminals, like this: dart run bin/server.dart --port MYPORT --target MYFUNCTION (where MYPORT and MYFUNCTION are either 8080/8081 or function/function2 respectively).
I guess I'm just confused on how to correctly manage this framework once deployed on Cloud Run.
EDIT 2. I just gave up using Dart as a Serverless language or even a Backend language. There's just too much jargon even for the basic things. Any backend framework is either dead, or maintained by one single enthusiast guy (props to him!). This language has not yet received enough love from the Google Team / the community and at this moment in time is basically not possible to go fullstack on just Dart. It's a dream, but it can't be realized now. Furthermore, Dart hardly lacks a proper SDKs to use Firestore, etc., so Firebase isn't an option. I find it easier to just learn NodeJS and exploit the Firebase support for Firebase Functions written in NodeJS, and I'll wait for more support in there in the future, if there ever will be.
The documentation is a bit sparse right now (and I'm new to it also! I couldn't find any good examples, so here goes...)
You can only have a single function that is served. It should be
named 'function' (the type and name can be overriden, see the
cloudevent example dartfn generate cloudevent)
You 'could' have many of these deployed so that each does a specific thing, such as processing cloudevents above, but most people
want something more REST-like (see next)
You need to attach a Router() so that you can have the single entry point (function) handled by specific logic in your code.
Example for Rest
add to pubspec.yaml (in dependencies:) shelf_router: ^1.1.2
delegate the #CloudFunction to use the Router()
functions.dart
import 'package:functions_framework/functions_framework.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf_router/shelf_router.dart';
Router app = Router()
..get('/health', (Request request) {
return Response.ok('healthy');
})
..get('/user/<user>', (Request request, String user) {
// fetch the user... (probably return as json)
return Response.ok('hello $user');
})
..post('/user', (Request request) {
// convert request body to json and persist... (probably return as json)
return Response.ok('saved the user');
});
#CloudFunction()
Future<Response> function(Request request) => app.call(request);

The getEntityAttributes() function in Thingsboard

I am trying to use the attributeService.getEntityAttributes function to obtain some server attributes of my device. I was using the .getEntityAttributesValues function when working with the 2.x version of Thingsboard and it was working fine. With the current version I am using the following code:
var conf = {
ignoreLoading: false,
ignoreErrors: true,
resendRequest: true
};
var myattr = attributeService.getEntityAttributes(entityID,'SERVER_SCOPE',["myattribute"],conf);
But I get no data or error back. I was using the .getEntityAttributesValues with .then() method but it doesn't seem to work anymore. It says ".then is not a function".
What am I doing wrong? Please help and tell me how to use the new function properly. I am using TB v.3.1.1 CE.
Thingsboard 2.x UI was made with AngularJS.
Thingsboard 3.x UI now uses Angular.
One of the key differences between these frameworks in regards of your problem is the move from Promise based services, to Observable based services.
Let's look at the source of the getEntityAttributes function:
https://github.com/thingsboard/thingsboard/blob/2488154d275bd8e6883baabba5519be78d6b088d/ui-ngx/src/app/core/http/attribute.service.ts
It's mostly a thin wrapper around a network call made with the http.get method from Angular.
Therefore, if we have a look at the official documentation: https://angular.io/guide/http#requesting-data-from-a-server, it is mentioned that we must subscribe to the observable in order to handle the response. So something along the lines of:
attributeService.getEntityAttributes(entityID,'SERVER_SCOPE',["myattribute"],conf).subscribe((attributes) => {…})

Firefox native messaging through webextension

Created a webextension for firefox (currently using Nightly 52), that uses native messaging to launch a java program on Linux (Ubuntu 14, 32x).
The webextension loads, reads the .json file and reads the path which points to a script that starts the java program. The JSON and the path are correct as when I use:
var native = browser.runtime.connectNative("passwordmanager");
console.log("native.name" + native.name); //outputs passwordmanager.
native.onDisconnect.addListener(function(m) { console.log("Disconnected"); });
The above code prints the name of the native port and also prints "Disconnected". So I m guessing the native app is terminating for some reason.
The application is only skeleton right now, that just does sysout and reads sysin and works correctly if Launch it directly through the shell script.
While debugging the webextension, I am not able to step into the call to connectNative, as it just steps-over that call instead of doing step-in. So kind of out of options whats' going wrong.
Please let me know if anyone is able to create a native messaging app based on FF webextension and any pointers on what I might be doing wrong.
Thanks
This solution here shows you how to detect onConnect and onFail. It should help you out to figure out your real problem.
So I don't think you can do proper error handling with connectNative from the JS side alone. You can do somewhat error handling if you get the exe side involved, but you can't get a string for "error reason" when an error occurs. The error is only logged to console.
First make sure to set your deeloper prefs, so messages show in your browser console. You can use this addon - https://addons.mozilla.org/en-US/firefox/addon/devprefs/ - or read that addon description it gives you the MDN page with the prefs to set.
Then this is how you can do some sort of error handling (without error reason) (pseudo-code - i might need a .bind in the callbcks):
function connectNative(aAppName, onConnect, onFail) {
var listener = function(payload) {
if (!connected) {
connected = true;
port.onDisconnect.removeListener(failedConnect);
onConnect();
} else {
// process messages
}
}
var failedConnect = function() {
onFail('failed for unattainable reason - however see browser console as it got logged there');
}
var connected = false;
var port = chrome.runtime.connectNative(aAppName);
port.onMessage.addListener(listener);
port.onDisconnect.addListener(failedConnect);
return port;
}
Now in your exe, as soon as it starts up, make it write to stdout something. That will trigger the onConnect.

How can you get information about other apps running or in focus?

My motivation: I'm writing an app to help with some quantified self / time tracking type things. I'd like to use electron to record information about which app I am currently using.
Is there a way to get information about other apps in Electron? Can you at least pull information about another app that currently has focus? For instance, if the user is browsing a webpage in Chrome, it would be great to know that A) they're using chrome and B) the title of the webpage they're viewing.
During my research I found this question:
Which app has the focus when a global shortcut is triggered
It looks like the author there is using the nodObjc library to get this information on OSX. In addition to any approaches others are using to solve this problem, I'm particularly curious if electron itself has any way of exposing this information without resorting to outside libraries.
In a limited way, yes, you can get some of this information using the electron's desktopCapturer.getSources() method.
This will not get every program running on the machine. This will only get whatever chromium deems to be a video capturable source. This generally equates to anything that is an active program that has a GUI window (e.g., on the task bar on windows).
desktopCapturer.getSources({
types: ['window', 'screen']
}, (error, sources) => {
if (error) throw error
for (let i = 0; i < sources.length; ++i) {
log(sources[i]);
}
});
No, Electron doesn't provide an API to obtain information about other apps. You'll need to access the native platform APIs directly to obtain that information. For example Tockler seems to do so via shell scripts, though personally I prefer accessing native APIs directly via native Node addons/modules or node-ffi-napi.
2022 answer
Andy Baird's answer is definitely the better native Electron approach though that syntax is outdated or incomplete. Here's a complete working code snippet, assumes running from the renderer using the remote module in a recent Electron version (13+):
require('#electron/remote').desktopCapturer.getSources({
types: ['window', 'screen']
}).then(sources => {
for (const thisSource of sources) {
console.log(thisSource.name);
}
});
The other answers here are for the rendering side - it might be helpful to do this in the main process:
const { desktopCapturer } = require('electron')
desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
for (const source of sources) {
console.log("Window: ", source.id, source.name);
}
})

Resources