How can I create an HTTP server in flutter web? - flutter-web

I've found a lot of ways to create a server in flutter but none of them work in flutter web, only mobile. That's mainly because the dart:io package doesn't work for web and the universal_io hasn't implemented the server class. So how can I create a server?

here is an example with a dart
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;
Response _echoRequest(Request request) => Response.ok('Request for "${request.url}"');
void main() async {
var handler = const Pipeline()
.addMiddleware(logRequests())
.addHandler(_echoRequest);
var server = await shelf_io.serve(handler, 'localhost', 8080);
// Enable content compression
server.autoCompress = true;
print('Serving at http://${server.address.host}:${server.port}');
}
The package https://pub.dev/packages/shelf

Related

i want to use socket.io v4 with flutter without socket-io-client package

please guys I want another package as an alternative to socket-io-client because this package does not support nodejs socket.io version 4 and should support null safety
Try using dart:io build in package
import "dart:io";
import 'dart:typed_data';
// Client socket
void conntectToSocekt() async {
String host = "http://localhost";
int port = 3000;
Socket clientSocekt = await Socket.connect(host, port);
clientSocekt.listen((Uint8List event) {
// data comming from the socket.
});
}
the dart:io package's Socket is not support in flutter web

Unable to connect to NodeJS standalone socket.io with ReactJS

I am looking for the best WS solution for IoT project. I am currently testing my options with Web Sockets. I have tried so far two NPM libraries 'ws' and 'websockets'. They worked great both NodeJS and ReactJS implementation was simple. I am now trying websocket.io. Reading the documentation I struggle to create even a simple working example copying the code directly from the documentation. Since the test code is so simple, I am really confused especially after the positive experience with two previous packages. I am pretty sure I am doing something wrong but I am unable to spot my mistake. I am really thankful for anyone helping to spot what am I not doing right.
NodeJS server instance listening on port 8000 (based on example here: https://socket.io/docs/v4/server-initialization/) :
const io = require("socket.io")();
io.on("connection", socket => {
console.log('blip')
});
io.listen(8000);
React client trying to connect to the NodeJS server from port 2000:
import React from "react";
import { io } from "socket.io-client";
class Io extends React.Component {
state = {
wsConnected: false
}
componentDidMount() {
const socket = io.connect('http://localhost:8000');
socket.on("connect", () => {
console.log('connect',socket.id);
});
}
render() {
const { wsConnected } = this.state;
return (
<div>{wsConnected ? 'on' : 'off'}</div>
)
}
}
export default Io
It seems you have CORS problem when in polling transport mode, So you can use Socket.io standalone server like this when you are using polling:
const io = require("socket.io")(
{
cors: {
origin: '*',
}
}
);
io.on("connection", socket => {
console.log(`${socket.handshake.headers.origin} connected`);
});
io.listen(8000);
But it's better use websocket transport if you need persistent http connection. When you are using websocket transport mode, there's no CORS policy.
websocket transport doesn't support http headers like cookies or etc but it is better to use it when there's energy consumption concerns in client side. Also you can force socket.io server to only supports determined transport modes. See socket.io documentations.

Get my Action’s server URL in (JavaScript) fulfilment code

I am using actionssdk and I build my Action fulfilments using Javascript and node.js + Express.
I am looking for a way to get the url (protocol + host name + port) of the server where the fulfilment is hosted.
Is there a simple way to do this? E.g. in the MAIN intent? Is there some conv-property I can use? Can I get hold of a req-parameter in the MAIN-intent, from which I can deduct hostname etc?
const express = require('express');
const expressApp = express();
const { actionssdk, ... } = require('actions-on-google');
const app = actionssdk({
ordersv3: true,
clientId: ...
});
expressApp.post('/fulfilment', app);
app.intent('actions.intent.MAIN', (conv) => {
let myUrl: string = ... // ???????
...
});
(background: obviously I know myself to where I deployed my fulfilment code. But I have a reusable template for fulfilment code in which I want to refer to the host url, and I do not want to type that in manually each time I develop a new Action).
You can get access to the request object in a middleware via Framework Metadata which is by default of type BuiltinFrameworkMetadata which contains objects used by Express
For example, you can use it like this, which will be ran before each request:
app.middleware((conv, framework) => {
console.log(framework.express.request.headers.host)
})

How to get exact web socket url of my node app on Heroku

I followed a tutorial to host a chat app backend with node.js on heroku. The source is available here.
It is currently hosted on Heroku and works fine at the moment. The url is here.
My question is how to connect this web socket on my mobile app? What is the exact url to the socket?
Using https://shielded-everglades-33427.herokuapp.com/ or ws://shielded-everglades-33427.herokuapp.com/ did not work.
I am using an iOS app with Socket.IO-Client-Swift library to test the socket and the relevant part is here:
func connectToSocketUI(){
let socketURL = URL(string: "ws://shielded-everglades-33427.herokuapp.com:443")!
let manager = SocketManager(socketURL: socketURL)
let socketIO = manager.defaultSocket
socketIO.on(clientEvent: .connect) { (data, ack) in
print("Connected to Socket.io")
}
socketIO.on(clientEvent: .disconnect) { (data, ack) in
print("Disconnected to Socket.io")
}
socketIO.on("newMessage") { (data, ack) in
print(data)
}
socketIO.connect(timeoutAfter: 3) {
print("Error")
}
}
Since your Heroku app is served over https, you should be using wss://
Try this:
wss://shielded-everglades-33427.herokuapp.com/

Socket.io not working in angular project

I am trying to learn angular with socket in a todo app. But socket is not working. I am using socket.io v2.0.3. but I am getting error in chrome console.
My code is -
import io from "socket.io-client";
private url = 'http://localhost:3001';
private socket;
ngOnInit(): void() {
this.socket = io.connect(this.url);
// Receive Added Todo
this.socket.on('TodoAdded', (data) => {
console.log('TodoAdded: '+JSON.stringify(data));
this.todos.push(data.todo);
});
}
I think you need to import io like this instead:
import * as io from 'socket.io-client';
otherwise you do not know which export to use from socket.io-client. It has
no default export.
Side Note:
You can use this.socket = io(this.url) instead of using the connect-method if you want to.
this problem sucked a lot of my energy the solution is very simple . all of you guys who are working in angular6+ and using RxJS 6+ just do this
in your polyfills.ts file just add this line
(window as any).global = window;
hope this solves your problem

Resources