I'm trying to set up a Websocket client that communicates with a websever via JSON. I don't find any good examples online.
I only found this code online :
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);
};
I don't know how to integrate this code into my app-code to function.
Do I need to install some packages for it?
I'm doing a project for my studies, and at the end I should have a Quiz-App which connects to a server to get the questions and answers for the game.
Thanks for anny help!
You do not need anything else to work with a WebSocket in react-native (or any relatively new JS environment for that matter). The example that you found covers pretty much anything that you need to get started. The next step is to bind that to your React logic. For instance, you can create a WebSocketController component that would look (details omitted) like this
class WebSocketController extends React.Component {
componentDidMount(){
this.ws = new WebSocket('ws://host.com/path');
this.ws.onmessage = this.handleMessage.bind(this);
this.ws.onerror = //...
}
handleMessage(e){
// dispatch event (á la redux, flux), or do something else
}
componentWillUnmount(){
// close WS
}
}
Render this within your React hierarchy and it will be started along the rest of your components. If you need something more specific, let us know.
Related
I have developed screen casting app. I am making connection using twilio but I want to share touch events from receiver(participant) to sender(host) as a live data. Is there any possible solution to simplify this?
If you are using Twilio Video for this connection then you can use the DataTrack API to send arbitrary data over your connection.
You can create a LocalDataTrack object:
const { LocalDataTrack } = require(`twilio-video`);
const dataTrack = new LocalDataTrack();
Connect it to a room, either by sending it as part of the tracks option when connecting, or by publishing it to the room after a connection has been made.
const { connect } = require('twilio-video');
const room = await connect('$TOKEN', {
name: 'my-chat-room',
tracks: [dataTrack]
});
You can send a message down the data track once it is published:
dataTrack.send(message)
And you can receive data track messages by subscribing to the track and listening for the message event:
participant.on('trackSubscribed', track => {
console.log(`Participant "${participant.identity}" added ${track.kind} Track ${track.sid}`);
if (track.kind === 'data') {
track.on('message', data => {
console.log(data);
});
}
});
See the documentation for more detail.
According to the Flutter's official deep linking page, we do not require any plugin or native Android/iOS code for handling deep links.
But it doesn't really tell us how we can get the data from that link. I'm talking from coding perspective. Sure, they have written in there that:
But this does not tell me where should I write what code to actually get the complete link. I've looked for examples/tutorials but I'm unable to find anything that is not using a plugin for handling deep linking.
Right now, all I've done is add <intent-filter> tags in AndroidManifest.xml file and on clicking the link, my app has started to show up. But I don't know how to extract data from that link.
Is there anyone who can guide me here? Thanks in advance.
You need platform specific code to handle deep linking. If you follow link mention in documention, you will find complete example.
private val CHANNEL = "poc.deeplink.flutter.dev/channel"
private var startString: String? = null
override fun configureFlutterEngine(#NonNull flutterEngine:FlutterEngine) {
GeneratedPluginRegistrant.registerWith(flutterEngine)
MethodChannel(flutterEngine.dartExecutor, CHANNEL).setMethodCallHandler { call, result ->
if (call.method == "initialLink") {
if (startString != null) {
result.success(startString)
}
}
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val intent = getIntent()
startString = intent.data?.toString()
}
Flutter Code:
class DeepLinkBloc extends Bloc {
//Event Channel creation
static const stream = const
EventChannel('poc.deeplink.flutter.dev/events');
//Method channel creation
static const platform = const
MethodChannel('poc.deeplink.flutter.dev/channel');
StreamController<String> _stateController = StreamController();
Stream<String> get state => _stateController.stream;
Sink<String> get stateSink => _stateController.sink;
//Adding the listener into contructor
DeepLinkBloc() {
//Checking application start by deep link
startUri().then(_onRedirected);
//Checking broadcast stream, if deep link was clicked in opened appication
stream.receiveBroadcastStream().listen((d) => _onRedirected(d));
}
_onRedirected(String uri) {
// Here can be any uri analysis, checking tokens etc, if it’s necessary
// Throw deep link URI into the BloC's stream
stateSink.add(uri);
}
#override
void dispose() {
_stateController.close();
}
Future<String> startUri() async {
try {
return platform.invokeMethod('initialLink');
} on PlatformException catch (e) {
return "Failed to Invoke: '${e.message}'.";
}
}
}
Follow this link for more detail.
https://medium.com/flutter-community/deep-links-and-flutter-applications-how-to-handle-them-properly-8c9865af9283
The Flutter way to do that, assuming you've already made the steps in the guide you posted, is to create a onGenerateRoute and/or onGenerateInitialRoutes handlers in your MaterialApp so that these handlers deals with the routes passed or pushed by the framework according to the described behaviors. You can even create an expected named route coming from a deeplink on the routes property of MaterialApp, even though I believe the dynamic generation of routes is more appropriate due to the dynamic nature of deeplinking, specially if you're dealing with "authentication needed content" inside your app.
Or, if you don't want to pass trough the platform specific code, you could use firebase dynamic links. That would allow to easily listen to links coming from both platforms and you also get the advantage that your link would bring up the store listing page if the user doesn't have the app installed.
I've written a full example here: https://gbaccetta.medium.com/flutter-deep-linking-with-firebase-dynamic-links-and-bloc-architecture-660f0517fbc2
Do for android as said in the web page: "Add a metadata tag and intent filter to AndroidManifest.xml inside the tag with the ".MainActivity" name". Do what required for ios too.
Then use onGenerateRoute in the usual way in MaterialApp, don't use "routes:". For example:
onGenerateRoute: (settings) {
print("settings.name " + settings.name.toString());
if (settings.name == '/') return MaterialPageRoute(builder: (_) => ScreenStart());
return MaterialPageRoute(builder: (_) => ScreenUnknown());
},
Then to simulate I did:
cd /Users/Utente/AppData/Local/Android/Sdk/platform-tools
adb shell
am start -W -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d "http://theaddressichoosed.com/helloworld?byebye"
And
print("settings.name " + settings.name.toString());
printed
settings.name /helloworld?byebye
After spending some time on this, here's my take using the Navigator 2 API. It also shows how to perform query and path arguments parsing. Hope it will save someone the time I spent researching this.
Obviously you also need to edit your platform-specific build files (such as AndroidManifest.xml for Android) as shown in the Flutter Deep Linking page.
A special note for Android 12 and above: you'll also need to securely approve the app's domain in the Google Play Developer Console for deep linking to work.
class App extends StatelessWidget {
const App({super.key});
#override
Widget build(BuildContext context) => MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScaffold(),
'/route1': (context) => const RouteOneScaffold(),
'/route2': (context) => const RouteTwoScaffold(),
// Other routes which don't need any sort of query parsing
},
onGenerateRoute: (settings) {
// This is executed to determine which route to follow if no adequate entry is found in the `routes` array above.
// Here we can parse path and query parameters as we like.
final fullRoute = settings.name;
if (fullRoute == null) {
return null;
}
final routeData = Uri.tryParse(fullRoute);
if (routeData == null) {
return null;
}
final pathParameters = routeData.pathSegments;
final queryParameters = routeData.queryParameters;
// Here you can write your route handling logic
return MaterialPageRoute(builder: (context) => RouteThreeScaffold(pathParameters,queryParameters));
},
);
}
I once wrote a quick ‘offline.html‘. Just be be sure I understood how offline PWA worked:
This is offline.html (My App Name)
I thought it worked as expected. So I deleted it and wrote a better one, with a back button, some info etc.
Now when this app is offline it starts on the page the manifest.json days, as expected.
However, if I try to refresh the page that spooky "offline.html" shows up. From nowhere.
I've tried to understand where it lurks, but I can't find it. (The new "offline.htmi" is there when I go to it in the web browser.)
I've tried Firefox offline on my mobile to see if the spoky "offline.html" jumps up there to. It does. 😐
I've cleared the cache in Chrome. The spoky "offline.html" is still there.
Any ideas?
(This is on Android 9)
Offline pages are not exactly stored in caches as regular cached items, there are stored quite differently, relative to the current installed service worker. I tried looking for an article to explain this more but can't walk around any currently.
However you'll have to unregister your service worker or learn how Updating service worker works,
The aim is to remove the lurking offline.html served to the new offline.html that exists.
This is what I finally landed on. It seems to work. The test for 404 is of course not optimal, but I leave it that way for now, hoping that the emerging standard will address this issue soon.
async function setupServiceWorker() {
let reg;
if (navigator.serviceWorker.controller) {
console.log("Active service worker found, no need to register");
// new Popup("registered service worker, .active.scriptURL", reg.active.scriptURL, null, true).show();
reg = await navigator.serviceWorker.getRegistration();
} else {
reg = await navigator.serviceWorker.register("service-worker.js", { scope: "./" });
console.log("Service-worker.js registered, scope: " + reg.scope);
}
try {
if (navigator.onLine) {
const newReg = await reg.update();
}
} catch (err) {
const is404 = err.message.match("404");
new Popup("err", is404 + " " + err.message).show();
if (is404) {
let wasUnregistered;
try {
wasUnregistered = await reg.unregister();
} catch (errUnreg) {
new Popup("unregister() service worker failed", errUnreg.message).show();
}
if (wasUnregistered) {
setTimeout(setupServiceWorker, 1000);
}
}
}
}
setTimeout(setupServiceWorker, 5000);
I have created a REST service using Node.js and MongoDB for using in one of my Android app.
The get methods is working as expected when called from Android App.
I am trying to build a JSON object from Android App with necessary details and post to the service.I am unable to post to my collections. Below is the code snippet I have used in my Node.js
app.post('/accounts/put/:uObject', function(req, res, next) {
var username=uObject.name;
db.collection('test').insert({"username":username},function(err,docs){if(err){
res.send("There was some problem during insertions of linkes");
}
else{
res.send("Fail");
} });
});
What Am I doing wrong in this? I am getting the object as parameter and getting the values inside the function and passing to the insert.
To get the parameter from the route you need to use req.params, in your case req.params.uObject. Also common practice in JavaScript is to return early upon a condition being met.
app.post('/accounts/put/:uObject', function(req, res, next) {
var username = req.params.uObject;
db.collection('test').insert({
"username": username
}, function(err, docs) {
if (err) {
return res.send("There was some problem during insertions of linkes");
}
res.send("Fail");
});
});
I am trying to use PortableRest to make an Async call to a Web API 2.2 Rest service from Xamarin Forms.
I think I have some kind of deadlock / synchronisationcontext issue but I cannot work it out (newbie to async etc).
Can anyone please help?
My controller test method (removed any call to database) -
public IEnumerable<ContentModel> GetTestRest()
{
return new List<ContentModel> {
new ContentModel() {Categoryid = 1, Title = "Title"}};
}
My Unit Test Passes -
[TestMethod]
public async Task TestRest()
{
MyNewsApiClient MyNewsApiClient = new MyNewsApiClient();
var models = await MyNewsApiClient.TestRest();
int count = models.Count;
Assert.AreEqual(1, count);
}
My PortableRest Proxy (PCL) Method -
public async Task<List<ContentModel>> TestRest()
{
var request = new RestRequest();
request.Resource = "Content/GetTestRest";
return await ExecuteAsync<List<ContentModel>>(request);
}
Xamarin Forms ContentPage (PCL) -
public partial class NewsType1CP : ContentPage
{
public NewsType1CP ()
{
InitializeComponent ();
}
protected override void OnAppearing ()
{
LoadData (); // this is a sync call of an async method, not sure how else to approach, make OnAppearing async?
}
public async Task LoadData ()
{
Debug.WriteLine ("LoadData");
HeaderLabel.Text = "Load Data!";
MyNewsApiClient api = new MyNewsApiClient ();
var cm = await api.TestRest ();
// this will work on its own, control returns to this method - await api.GetDelay ();
HeaderLabel.Text = "After! - ";
NewsListView.ItemsSource = cm;
}
}
The await to api.TestRest() never results in HeaderLabel.After or ListView being set.
If I just add a test Proxy Method GetDelay() which does not call PortableRest via return await ExecuteAsync>(request);
public async Task<bool> GetDelay ()
{
await Task.Delay (1000);
return true;
}
Then all "works".
Thanks for your help, I will download the source code for PortableRest if required (using Nuget dll at present), just was not sure if missing something basic at this top level.
Right, this eventually has nothing to do with Async (or any Issue with PortableRest), but thought I would share in case it can help others.
I eventually put a try block (obvious next step now!) and caught this exception -
Method not found: 'System.Net.Http.HttpClientHandler.set_AutomaticDecompression'.
So, looking at this -
http://davidburela.wordpress.com/2013/07/12/error-when-using-http-portable-class-library-compression/
PortableRest was already in my Forms PCL, but I needed to add Microsoft Http Client Libraries Nuget to my Android Application.
I then got -
Error: ConnectFailure (The requested address is not valid in this context)
I thought it may be something to do with Android Permissions, but it was not in this case (although I now realise I need to add Internet permission anyway for future calls).
Because I am running my App in a VM (from GenyMotion / Virtual Box) then the Android App cannot access LocalHost (where my Web Api resides)
So, from this -
http://bbowden.tumblr.com/post/58650831283/accessing-a-localhost-server-from-the-genymotion
I can confirm that using the address shown in VirtualBox > File > Preferences > Network > VirtualBox Host-Only Network Adapter > Modify does the job beautifully.
Thanks for your help.