Is it possible to use websockets (via socket.io etc.) in a React Native app for bidirectional communication with a custom backend rather that using the supported fetch() with polling etc.? For example, neccessary for a chat app with React Native.
Their website does not mention an API for this yet.
I have not tried it myself but it should be no problem to run socket.io for react-native app (it's. Socket.io is pure javascript library without any HTML/CSS dependencies I believe, so simple
npm install socket.io --save
in your project should be enough to start using it.
Actually, it looks like someone did it before and managed to get socket.io working for react-native: https://github.com/badfortrains/wsExample
Here is a step by step of what needs to be done to get socket.io up and running in a react native app. Its very similar to Jarek Ptiuk's answer but has an example of what to do.
Is it possible to combine React Native with socket.io
the example:
import React from 'react-native';
// ... [other imports]
window.navigator.userAgent = 'react-native';
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});
}
// no you can use this.socket.io(...)
// or any other functionality within socket.io!
...
}
Related
I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully
Nativescript Angular is well known for its code sharing properties. I am trying to simplify my design by using only 1 typescript file instead of splitting into the .ts and the .tns.ts file.
I was trying to import { Page } from "tns-core-modules/ui/page"; in the .ts. When running on Android, the code works flawlessly, but if I ng serve for the web app, it says Module not found: Error: Can't resolve 'tns-core-modules/ui/page'.
The reason why I wanted to import the page module is because of setting the action bar properties
constructor(private page: Page) {
if (isAndroid) {
console.log("This is Android");
this.page.actionBarHidden = true;
}
}
I was hoping to import the tns-core-modules/ui/page and some other tns-core-modules in the same file as the angular web app. Is it possible to do so? Or is it a must to split into the .ts and the .tns.ts files?
You have to go with platform specific ts files, one for web and one for tns, Page won't be valid while running inside a browser (ng serve).
If you prefer to reuse most of your code, try writting a common / base ts component, extend platform specific ts files from the common / base ts component, inject Page only within the tns specific ts file.
I am trying to learn how to use socket.io and in the tutorial I am doing, they load socket.io on the front end by inserting the following script from cdnjs
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.min.js')
(Note: It seems that the newest is 2.2.0 and available on https://cdnjs.com/libraries/socket.io)
However, I don't see the link to this library through cdnjs on the socket.io website. If I am understanding the socket.io client-side documentation correctly, the documentation shows setting up the library by doing the following:
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost');
</script>
const io = require('socket.io-client');
// or with import syntax
import io from 'socket.io-client';
Basically, are these two different ways to load the library on the client side and is there a difference? It seems weird to insert the script from cdnjs when it doesn't seem to be on the socket.io website.
I implemented flux on top of a create-react-app application using the flux todomvc example as the point-of-departure:
AppView renders the create-react-app App component
AppContainer exports AppView (just like the todomvc)
index.js renders AppContainer (the todomvc uses root.js)
I'm wondering if that's the way to do it, or if it is better to rewrite the App functionality directly in AppView (in other words, get rid of the App component entirely).
I am building a Titanium based mobile application (iOS) in Appcelerator and want to connect it to Node.js(Socket.io) based server. For that I need a client side socket.io file which.
I tried to import the client side JS using 'require',
var io = require('socket.io'); //JavaScript Downloaded from here: https://github.com/socketio/socket.io-client/blob/master/socket.io.js
var socket = io.connect('http://localhost:3000');
I am getting the following error:
Script Error: Module "socket.io" failed to leave a valid exports object
Please let me know where I am going wrong or what is the way to use socket.io in Appcelerator.
Thanks In Advance.