I have a Ionic 2 app with a proxy I user for development when i use ionic serve. All was working great with this in my config file :
"proxies": [
{
"path": "/apiv2/",
"proxyUrl": "https://myapilink.com/apiv2/"
}
]
And in my Ionic provider :
constructor(public http: Http) {
this.API_URL = "/apiv2";
this.data = {};
}
call(action, entity, params){
return new Promise(resolve => {
let link = this.API_URL;
let data = JSON.stringify({action: action, entity: entity, params: params});
this.http.post(link, data)
.map(res => res.json())
.subscribe(data => {
this.data = data;
resolve(this.data);
}, error => {
console.log(error);
});
});
}
When I run my Ionic project with ionic serve, I can see that the proxies are added :
[09:54:50] Proxy added:/apiv2/ => https://myapilink.com/apiv2/
But when I run my app, when an API call comes, in my network log I only have 500 errors :
POST http://localhost:8100/apiv2/ 500 (Internal Server Error)
But while Ionic server is running, if I go on chrome and enter this URL : http://localhost:8100/apiv2/, I have the result of my API, with my JSON return, so the redirection is made. I don't understand where it's coming from
Thank in advance for any help
There is some guide in github: https://github.com/ionic-team/ionic-cli#service-proxies .
Maybe in the ionic.config.json you should config like this：
"proxies": [
{
"path": "/apiv2/",
"proxyUrl": "https://localhost:8100/apiv2/"
}
]
Related
I am trying to integrate socket.io with strapi. But unfortunately I have been unable to do so without any proper tutorial or documentation covering this aspect.
I followed along with the only resource I found online which is:
https://medium.com/strapi/strapi-socket-io-a9c856e915a6
But I think the article is outdated. I can't seem to run the code mentioned in it without running into tonnes of errors.
Below is my attempt to implement it and I have been trying to connect it through a chrome websocket plugin smart websocket client But I am not getting any response when I try to run the server.
I'm totally in the dark. Any help will be appreciated
module.exports = ()=> {
// import socket io
var io = require('socket.io')(strapi.server)
console.log(strapi.server) //undefined
// listen for user connection
io.on('connect', socket => {
socket.send('Hello!');
console.log("idit")
// or with emit() and custom event names
socket.emit('greetings', 'Hey!', { 'ms': 'jane' }, Buffer.from([4, 3, 3, 1]));
// handle the event sent with socket.send()
socket.on('message', (data) => {
console.log(data);
});
// handle the event sent with socket.emit()
socket.on('salutations', (elem1, elem2, elem3) => {
console.log(elem1, elem2, elem3);
});
});
};
So I found the solution. Yay. I'll put it here just in case anybody needs it.
boostrap.js
module.exports = async () => {
process.nextTick(() =>{
var io = require('socket.io')(strapi.server);
io.on('connection', async function(socket) {
console.log(`a user connected`)
// send message on user connection
socket.emit('hello', JSON.stringify({message: await strapi.services.profile.update({"posted_by"})}));
// listen for user diconnect
socket.on('disconnect', () =>{
console.log('a user disconnected')
});
});
strapi.io = io; // register socket io inside strapi main object to use it globally anywhere
})
};
Found this at: https://github.com/strapi/strapi/issues/5869#issuecomment-619508153_
Apparently, socket.server is not available when the server starts. So you have to make use of process.nextTick that waits for the socket.server to initialize.
I'll also add a few questions that I faced when setting this up.
How do i connect from an external client like nuxt,vue or react?
You just have to connect through "http://localhost:1337" that is my usual address for strapi.
I am using nuxt as my client side and this is how set up my socketio on the client side
I first installed nuxt-socket-io through npm
Edited the nuxt.config file as per it's documention
modules:[
...
'nuxt-socket-io',
...
],
io: {
// module options
sockets: [
{
name: 'main',
url: 'http://localhost:1337',
},
],
},
And then i finally added a listener in one of my pages.
created() {
this.socket = this.$nuxtSocket({})
this.socket.on('hello', (msg, cb) => {
console.log('SOCKET HI')
console.log(msg)
})
},
And it works.
A clean way to integrate third-party services into Strapi is to use hooks. They are loaded once during the server boot. In this case, we will create a local hook.
The following example has worked with strapi#3.6.
Create a hook for socket.io at ./hooks/socket.io/index.js
module.exports = strapi => {
return {
async initialize() {
const ioServer = require('socket.io')(strapi.server, {
cors: {
origin: process.env['FRONT_APP_URL'],
methods: ['GET', 'POST'],
/* ...other cors options */
}
})
ioServer.on('connection', function(socket) {
socket.emit('hello', `Welcome ${socket.id}`)
})
/* HANDLE CLIENT SOCKET LOGIC HERE */
// store the server.io instance to global var to use elsewhere
strapi.services.ioServer = ioServer
},
}
}
Enable the new hook in order for Strapi to load it - ./config/hook.js
module.exports = {
settings: {
'socket.io': {
enabled: true,
},
},
};
That's done. You can access the websocket server inside ./config/functions/bootstrap.js or models' lifecycle hooks.
// ./api/employee/models/employee.js
module.exports = {
lifecycles: {
async afterUpdate(result, params, data) {
strapi.services.ioServer.emit('update:employee', result)
},
},
};
For those who are looking the answer using Strapi version 4
var io = require("socket.io")(strapi.server.httpServer)
We have a working demo between React and Spring Boot Data Geode using rSocket for fire & forget, request response and request stream but when we try and use request channel we get error:
org.springframework.messaging.MessageDeliveryException: Destination 'quotes' does not support REQUEST_CHANNEL. Supported interaction(s): [REQUEST_STREAM]
So far on web it looks like this ought to be possible from RSocket Git
It's a simple spring boot app with #Controller endpoints that run over rSocket like this:
#Controller
public class RSocketController {
private static final Logger log = LogManager.getLogger(RSocketController.class);
#Autowired
PriceService priceService;
#MessageMapping(value = "quotes")
public Flux<Quote> getQuotes() {
log.info("In getQuotes");
return priceService.generatePrices();
}
}
The generatePrices returns a Flux of prices which works fine in request stream but we would prefer to use request channel for bi-directional comms.
Client versions
"rsocket-core": "0.0.19"
"rsocket-flowable": "0.0.14"
"rsocket-tcp-client": "0.0.19"
"rsocket-websocket-client": "0.0.19"
Client code
const transport = new RSocketWebSocketClient(transportOptions);
const rSocketClient = new RSocketClient({serializers, setup, transport});
rSocketClient.connect().subscribe({
onComplete: socket => {
console.log('Client connected to the RSocket Server');
socket.requestChannel(Flowable.just({
data: 'foyss',
metadata: String.fromCharCode(6) + 'quotes'
})).subscribe({
onComplete: function() {
console.log(`Channel received end of server stream`);
},
onError: function(err) {
console.log("err", err);
},
onNext: payload => {
console.log(payload);
},
onSubscribe: function(subscription) {
console.log("got subscription");
subscription.request(0x7fffffff);
},
onError: error => {
console.log(error);
},
onSubscribe: cancel => {
console.log('onSubscribe cancel');
}})
},
onError: error => {
console.log(error);
},
onSubscribe: cancel => {
// console.log(cancel);
console.log('onSubscribe cancel');
}
})
Some JS libraries still don't support the request-channel model. Please check the official documentation for your JS lib, eg, for: https://www.npmjs.com/package/ng-rsocket-rxjs
Missing:
Lease Handling
Server Setup
Resume Support
Request Channel
.....
I'm having trouble with Laravel Echo (I think). I've built a vue chat app that works locally.
I've even cloned it onto another machine and got it working fine. But when I get it onto production, it's not working.
I'm not running npm on the server, I'm just doing a run npm prod before committing and pushing to the server.
For some reason it just doesn't work though. The messages are getting through to pusher as I can see them in the debug console.
Here's some of the code:
mounted() {
console.log('mounted');
Echo.private(`messages.${this.user.id}`)
.listen('NewMessage', (e) => {
console.log('in echo');
this.hanleIncoming(e.message);
});
axios.get('/contacts')
.then((response) => {
this.contacts = response.data;
});
},
methods: {
startConversationWith(contact) {
this.updateUnreadCount(contact, true);
axios.get(`/conversation/${contact.id}`)
.then((response) => {
this.messages = response.data;
this.selectedContact = contact;
})
},
saveNewMessage(message) {
console.log(message);
this.messages.push(message);
},
hanleIncoming(message) {
if (this.selectedContact && message.from == this.selectedContact.id) {
console.log('inside if of handleincoming');
this.saveNewMessage(message);
return;
}
this.updateUnreadCount(message.from_contact, false);
}
}
When local I get all the console.logs, but on prod I only get one and that's because saveMessage gets called on hitting enter from the message chat window. Do I need to install something on the server to get echo to work since I'm not doing npm install on the server. I don't think node is even installed. How can I get echo to work on production? Any help would be appreciated!
Have you started echo server on production?
The question must be very typical, but I can't really find a good comparison.
I'm new to Ionic & mobile dev.
We have a REST API (Spring Boot).
API is currently used by AngularJS 1.5 front-end only.
AngularJS app is authenticated based on the standard session-based authentication.
What should I use to authenticate an ionic 3 app?
As I understand, have 2 options:
Use the same auth as for Angular front-end.
implement oauth2 on the back-end and use the token for the ionic app.
As for now, I understand that implementing oauth2 at back-end is a way to go because with the option #1 I should store the username & password in the local storage (ionic app), which is not safe. Otherwise, if I don't do that - the user will have to authenticate each time the app was launched. Am I right?
So, that leaves me with option #2 - store oauth2 token on the device?
Good to go with #2. Here is how i manage token.
I use ionic storage to store token and a provider config.ts which hold the token during run time.
config.ts
import { Injectable } from '#angular/core';
#Injectable()
export class TokenProvider {
public token: any;
public user: any = {};
constructor( ) { }
setAuthData (data) {
this.token = data.token;
this.user = data
}
dropAuthData () {
this.token = null;
this.user = null;
}
}
auth.ts
import { TokenProvider} from '../../providers/config';
constructor(public tokenProvider: TokenProvider) { }
login() {
this.api.authUser(this.login).subscribe(data => {
this.shared.Loader.hide();
this.shared.LS.set('user', data);
this.tokenProvider.setAuthData(data);
this.navCtrl.setRoot(TabsPage);
}, err => {
console.log(err);
this.submitted = false;
this.shared.Loader.hide();
this.shared.Toast.show('Invalid Username or Password');
this.login.password = null;
});
}
and i do a check when app launch.
app.component.ts (in constructor)
shared.LS.get('user').then((data: any) => {
if (!data) {
this.rootPage = AuthPage;
} else {
tokenProvider.setAuthData(data);
this.rootPage = TabsPage;
}
});
api.provider.ts
updateUser(data): Observable < any > {
let headers = new Headers({
'Content-Type': 'application/json',
'X-AUTH-TOKEN': (this.tokenProvider.token)
});
return this.http.post(`${baseUrl}/updateUser`, JSON.stringify(data), {
headers: headers
})
.map((response: Response) => {
return response.json();
})
.catch(this.handleError);
}
And last logout.ts
logOut(): void {
this.shared.Alert.confirm('Do you want to logout?').then((data) => {
this.shared.LS.remove('user').then(() => {
this.tokenProvider.dropAuthData();
this.app.getRootNav().setRoot(AuthPage);
}, () => {
this.shared.Toast.show('Oops! something went wrong.');
});
}, err => {
console.log(err);
})
}
The final solution i've made:
ionic app:
implemented a jwt token storage similar to Swapnil Patwa answer.
Spring back-end:
Tried to use their original ouath2 package, but found out that as always with spring/java, configs are too time-consuming => made a simple filter which is checking for the manually generated & assigned jwt token.
I have a .NetCore Web API project. And I am trying to use Swagger on it.
All the configuration looks good but when I run my project I got an 404 error, page not found.
Here is my code:
public void ConfigureServices(IServiceCollection services)
{
services.AddSingleton(_config);
services.AddTransient<IRestHelper, RestHelper>();
// Add framework services.
services.AddApplicationInsightsTelemetry(_config);
services.AddMvc();
services.AddSwaggerGen(config =>
{
config.SwaggerDoc("v1", new Info { Title = "Slack Relay API", Version = "v1" });
});
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(_config.GetSection("Logging"));
loggerFactory.AddDebug();
app.UseApplicationInsightsRequestTelemetry();
app.UseApplicationInsightsExceptionTelemetry();
app.UseMvc();
app.UseSwagger(c =>
{
c.PreSerializeFilters.Add((swagger, httpReq) => swagger.Host = httpReq.Host.Value);
});
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "V1 Docs");
});
}
My web API base url is: http://localhost:88/
So when I try to open this URL I get a 404: http://localhost:88/swagger/ui
I am using NetCore 1.0.1 and In the project.json I have this line to import Swagger:
"Swashbuckle.AspNetCore": "1.0.0"
Any help please?
thanks
You are entering the wrong URL in the browser. With Swagger 1.0.0 RTM the default url changed from http://localhost:88/swagger/ui to http://localhost:88/swagger
You need to remember that order of middlewares is important: MVC midleware should be the last one, as it tries to process all requests. As you do not have controller's action mapped to /swagger/ui you receive 404 error. Modify Configure method to:
app.UseSwagger(c =>
{
c.PreSerializeFilters.Add((swagger, httpReq) => swagger.Host = httpReq.Host.Value);
});
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "V1 Docs");
});
app.UseMvc();
Moreover, it is better to replace app.UseMvc() with something like the following, so MVC middleware will not try to process any requests related to swagger (requests to URL started with /swagger):
app.MapWhen(x => !x.Request.Path.Value.StartsWith("/swagger"), builder =>
{
builder.UseMvc();
});