socket.io client in ionic 3 is not working? - node.js

I am trying to make a socket io client I am able to connect but I am not able to emit or receive message.I have create a web app Where If any user connect it shows new user is connected, so If I open My app It shows new user is connected but when I send message It does not show on the either side
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import * as io from 'socket.io-client';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
socket:any;
socketURL:any;
constructor(public navCtrl: NavController) {
this.socketURL = "my url";
this.socket = io(this.socketURL);
this.socket.on('connect',()=> {
console.log('connected from server');
})
this.socket.emit('createMessage', 'hello worlddddddddd');
this.socket.on('newMessage', (message)=>{
alert('new massage'+JSON.stringify(message));
}
)
}
ionViewWillleave(){
this.socket.on('disconnect',()=> {
console.log('disconnected from server');
});
}
}

I have this in my case and it works.
constructor(privatesocketService: SocketService, privatesocket: Socket){
this.socket.on('message', (data) = > {
console.log('message : ' + data);
});
}
ionViewDidLeave(){
console.log('ionViewDidLeave ChatRoomPage');
this.socketService.leaveConversation(this.conversationId);
}
ionViewDidLoad(){
console.log('ionViewDidLoad ChatRoomPage');
this.socketService.joinConversation(this.conversationId);
this.getUsers();
}
sendMessage(){
this.conversationService.sendMessage(this.conversationId, this.message);
}
import {Injectable} from '#angular/core';
import {Socket} from 'ng-socket-io';
#
Injectable()
export class SocketService {
constructor(privatesocket: Socket) {
this.socket.connect();
}
joinConversation(conversationId) {
this.socket.emit('enter-room', conversationId);
}
leaveConversation(conversationId) {
this.socket.emit('leave-room', conversationId);
}
sendMessage(conversationId) {
this.socket.emit('new-message', conversationId);
}
}

Related

Web socket wss connection failed having secure web server in Node and Angular

I am trying to connect a secure websocket connection from client (angular app) with my server (nodejs). I used mkcert to generate my key and cert and server is running in https showing connection is secure. when I am trying to connect with WS, the webscoet connects with server but when I use WSS I am getting an error of WebSocket connection to 'wss://localhost:port/' failed. Can anyone let me know where am I getting wrong to connect wss or how to connect wss websocket connection here?
My client side code is
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
connectToServer();
}
title = 'SSL-WEB-SOCKET-CLIENT';
}
function connectToServer() {
let ws= new WebSocket("wss://localhost:8082/");
ws.addEventListener("open", ()=>{
console.log("We are connected");
ws.send("hey, I am Client. Nice to meet you!");
});
ws.addEventListener("error", (event)=> {
console.log('WebSocket error: ', event);
});
ws.addEventListener("message", ({data})=>{
console.log("Server sent us: "+data);
});
}
Server side code
main.ts
import { NestFactory } from '#nestjs/core';
import { AppModule } from './app.module';
import * as fs from 'fs';
async function bootstrap() {
const httpsOptions = {
key: fs.readFileSync('./localhost-key.pem'),
cert: fs.readFileSync('./localhost.pem'),
rejectUnauthorized: false,
};
const app = await NestFactory.create(AppModule, {
httpsOptions,
});
await app.listen(8090);
console.log('Server started at 8090');
}
bootstrap();
app.controller.ts
import { Controller, Get } from '#nestjs/common';
import { AppService } from './app.service';
#Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
#Get()
getSecureWssConn(): string {
return this.appService.getSecureWssConn();
}
}
app.service.ts
import { Injectable } from '#nestjs/common';
#Injectable()
export class AppService {
getSecureWssConn(): string {
// eslint-disable-next-line #typescript-eslint/no-var-requires
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8082 });
wss.on('connection', (ws) => {
console.log('New Client connected');
ws.on('message', (data) => {
console.log(`Client has sent us: ${data}`);
ws.send('Hello! I am Server. Nice to meet you.');
});
ws.on('close', () => {
console.log('Client Disconnected');
});
});
return 'Hello, I am your SERVER';
}
}
Server running in browser!

Subscribe is not a Function Angular / Socket.IO

I'm writing a chat app and I'm using a Node server and socket.io server side and Angular and socket.io-client client side. Unfortunately I get a "this.socketService.getMessage(...).subscribe is not a function" error when I run it. Everything else seems to work.
app.component.ts:
import { Component, OnInit, OnDestroy } from '#angular/core';
import { SocketService } from './socket.service';
import { Observable } from 'rxjs';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'chat';
registered = false;
username: string;
constructor(public socketService: SocketService) {
}
ngOnInit(): void {
this.socketService
.getMessage()
.subscribe(msg => {
if (msg === 'Registered') {
this.registered = true;
console.log(this.registered)
}
});
}
register(username: string): void {
console.log(username)
this.username = username;
this.socketService.sendMessage('register', username);
}
send(message: string): void {
this.socketService.sendMessage('message', message);
}
}
socket.service.ts:
import { Injectable } from '#angular/core';
import { io } from 'socket.io-client';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class SocketService {
socket;
constructor() {
this.socket = io('http://localhost:3000/');
}
getMessage(): Observable<any> {
return this.socket.on('message', msg => {
console.log(msg);
});
}
sendMessage(type: string, words: any): void {
console.log(type, words);
this.socket.emit(type, words);
}
}
this.socket.on doesn't returns an Observable so you can't .subscribe() as you would do with an observable.
It returns a Socket as described into the docs : https://socket.io/docs/v3/client-api/#socket-on-eventName-callback

call a web service , by an action button with angular , from nodeJS server ,

want to call a rest API from a nodeJS server with a click of a button in my project angular to add a user in the database, the api in the server is connected to my mysql database , just i wonna invoke the api rest of add ou update ou delete from the button in my project angular . I am new to this I dont know how to proceed.
thank you
import { Component } from '#angular/core';
import { LocalDataSource } from 'ng2-smart-table';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { SmartTableData } from '../../../#core/data/smart-table';
//import { EmailValidator } from '#angular/forms';
#Injectable()
export class ConfigService {
constructor(private http: HttpClient) { }
}
#Component({
selector: 'ngx-smart-table',
templateUrl: './smart-table.component.html',
styles: [`
nb-card {
transform: translate3d(0, 0, 0);
}
`],
})
#Injectable()
export class Configuration {
public server = 'http://localhost:3000/';
public apiUrl = 'api/';
public serverWithApiUrl = this.server + this.apiUrl;
}
export class SmartTableComponent {
settings = {
add: {
addButtonContent: '<i class="nb-plus"></i>',
createButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
actionButonContent:'<i (click)="makeServiceCall($event)"><i/>',
},
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
actionButonContent:'<i (click)="onEditConfirm($event)"></i>'
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true,
actionButonContent:'<i (click)="onDeleteConfirm($event)"></i>'
},
columns: {
id: {
title: 'ID',
type: 'number',
},
firstName: {
title: ' Name',
type: 'string',
},
email: {
title: 'E-mail',
type: 'string',
},
password: {
title: 'password',
type: 'password',
},
},
};
source: LocalDataSource = new LocalDataSource();
constructor(private service: SmartTableData) {
const data = this.service.getData();
this.source.load(data);
}
onDeleteConfirm(event): void {
if (window.confirm('Are you sure you want to delete?')) {
event.confirm.resolve();
} else {
event.confirm.reject();
}
}
}
and this is my app.js (server)
var express = require('express');
var router = express.Router();
var user=require('../model/user');
router.get('/:id?',function(req,res,next){
if(req.params.id){
user.getUserById(req.params.id,function(err,rows){
if(err)
{
res.json(err);
}
else{
res.json(rows);
}
});
}
else{
user.getAllUsers(function(err,rows){
if(err)
{
res.json(err);
}
else
{
res.json(rows);
}
});
}
});
router.post('/',function(req,res,next){
user.addUser(req.body,function(err,count){
if(err)
{
res.json(err);
}
else{
res.json(req.body);
}
});
});
router.delete('/:id',function(req,res,next){
user.deleteUser(req.params.id,function(err,count){
if(err)
{
res.json(err);
}
else
{
res.json(count);
}
});
});
router.put('/:id',function(req,res,next){
user.updateUser(req.params.id,req.body,function(err,rows){
if(err)
{
res.json(err);
}
else
{
res.json(rows);
}
});
});
module.exports=router;
To make a call you need to add the HttpClientModule in your app.module.ts as import.
Then inject the Http client it wherever you want to use it:
constructor(private http: HttpClient){}
to use it just do:
this.http.get(<<url>>) //for get request
this.http.post(<<url>>,obj) //for post request
this returns an observable from which you can map the results and catch errors using Rxjs operators. for eg
addUser(user){ //called on button click
this.http.post(yourUrl,Json.Stringify(user)).pipe(
map((res)=>{
//do something with response
return 'sucess'
}),
catchError(err => {
//handleError
}
).subscribe(); // dont forget to subscribe
}
if you want to learn more : https://angular.io/guide/http
and for rxjs: https://www.learnrxjs.io/
Assume that the data that needs to be sent to the server is being passed to the function as the "data" parameter. Add "HttpClientModule" to the main app module or to your custom module if any as follows. Custom service has been imported in the app module or import it in your module accordingly.
app.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { CustomService } from 'location-of-custom-service';
#NgModule({
imports: [
CommonModule,
FormsModule,
HttpClientModule
],
declarations: [],
providers: [CustomService]
})
export class AppModule { }
Create a service file as follows.
custom.service.ts
import { Injectable } from '#angular/core';
import { Router } from '#angular/router';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
#Injectable({
providedIn: 'root'
})
export class CustomService {
public server = 'http://localhost:3000/';
public apiUrl = 'api/';
public serverWithApiUrl = this.server + this.apiUrl;
private fetchDataURL = this.serverWithApiUrl + 'fetchSomeData';
private addDataURL = this.serverWithApiUrl + 'addSomeData'
constructor(private _http: HttpClient) { }
// Fetch data
fetchData(id): Observable<any> {
this.fetchDataURL = this.fetchDataURL + "/" + id;
return this._http.get<any>(this.fetchDataURL, httpOptions)
.pipe(
retry(1),
catchError(this.handleError)
);
}
// Add data
addData(data): Observable<any> {
return this._http.post<any>(this.addDataURL, data, httpOptions);
}
// Error handler - you can customize this accordingly
handleError(error) {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
// client-side error
errorMessage = `Error: ${error.error.message}`;
} else {
// server-side error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
return throwError(errorMessage);
}
}
Your existing component has been modified so as to have the new additions as follows.
smarttable.component.ts
import { Component, OnInit } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { FormControl, FormGroup, Validators } from '#angular/forms';
import { CustomService } from './custom-service-location';
#Component({
selector: 'ngx-smart-table',
templateUrl: './smart-table.component.html'
})
export class SmartTableComponent implements OnInit {
constructor(private customService: CustomService) {}
fechedData: any;
// you existing codes goes here
// Add data - assume the data that needs to be sent to the server is as "data"
makeServiceCall(data) {
this.customService.addData(data)
.subscribe((data) => {
console.log(data);
// your logic after data addition goes here
},
(error) => {
// logic to handle error accordingly
});
}
// Fetch data
getData(id) {
this.customService.fetchData(id)
.subscribe((data) => {
console.log(data);
this.fechedData = data;
// your logic after data fetch goes here
},
(error) => {
// logic to handle error accordingly
});
}
}
I hope the above helps.

How to use socket.io in angular with node.js?

Clientside I used Angular 6 and Serverside i used node.js.
Here in angular 6 console it print message and
socket.io id({message: "Hello World", id: "6An-ctwlwbZZWrfMAAAB"})
after using below code.
this code is right or any change in this code bcoz I am not sure about this code kindly help to make correct this.
and another query is I have more than 15 components in my project so how to make common use this socket.io for all components or I have to import this app.component.ts code in all another component.
app.js(serverside)
after installing (npm i socket.io)
const express = require('express');
var app = express();
const http = require('http');
const socketIo = require('socket.io');
const server = http.Server(app);
const io = socketIo(server);
server.listen(3000,function(req,res){
console.log("listen at 3000!");
});
io.on('connection',(socket) => {
socket.emit('hello',{
message : 'Hello World',id: socket.id
})
});
app.component.ts(clientside)
after installing (npm i socket.io)
import * as socketIo from 'socket.io-client';
export class AppComponent implements OnInit {
ngOnInit(){
const socket = socketIo('http://localhost:3000/');
socket.on('hello',(data) => console.log(data));
}
}
}
The one way to achieve this mechanism is using ngx-socket-io, connect your node server at the module level or root level i have implemented like below
app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
import { AppComponent } from './app.component';
const config: SocketIoConfig = { url: 'http://192.168.1.187:9301', options: {} };
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SocketIoModule.forRoot(config),
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
create one service which handles your incoming and outgoing traffic.
import { Injectable } from '#angular/core';
import { Socket } from 'ngx-socket-io';
#Injectable({
providedIn: 'root'
})
export class SocketService {
constructor(public socket: Socket) { }
getMessage() {
return this.socket
.fromEvent<any>('msg')
.map(data => data.msg);
}
sendMessage(msg: string) {
this.socket.emit('msg', msg);
}
}
Update your code in your component file
export class AppComponent implements OnInit {
constructor(private socketService: SocketService) {}
title = 'app';
incomingmsg = [];
msg = 'First Protocol';
ngOnInit() {
this.socketService
.getMessage()
.subscribe(msg => {
console.log('Incoming msg', msg);
});
this.sendMsg(this.msg);
}
sendMsg(msg) {
console.log('sdsd', msg);
this.socketService.sendMessage(msg);
}
}
Create Service and turn your socket data into Observable stream
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs/behaviorSubject';
import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
import * as Rx from 'rxjs';
import * as io from 'socket.io-client';
#Injectable()
export class ChatService {
observable: Observable<string>;
socket;
constructor() {
this.socket = io('http://localhost:3000');
}
getData(): Observable<string> {
return this.observable = new Observable((observer) =>
this.socket.on('hello', (data) => observer.next(data))
);
}
// This one is for send data from angular to node
pushData(e) {
this.socket.emit('hello', e);
}
}
Then Call from component
App.component.ts
import { Component } from '#angular/core';
import { ChatService } from './common/chat.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title;
chat;
constructor(private cService: ChatService) {
this.cService.getData().subscribe(data => console.log(data));
}
onClick(e: string) {
this.cService.pushData(e);
this.chat = '';
}
}
You can create a service for working with a socket. E.g (of course this is a very simple example):
/* e.g app/shared/io/io.service.ts */
import { Injectable } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import * as socketIo from 'socket.io-client';
const SERVER_URL = '/';
/** Your events enum */
export enum IOEventName {
EVENT_NAME_1 = "EVENT_NAME_1",
EVENT_NAME_2 = "EVENT_NAME_2",
...
}
/** Interfaces for your event messages */
export interface IEventName1Message {
propOne: number,
propTwo: string,
...
}
export interface IEventName2Message {
propOne: Date,
propTwo: Boolean,
...
}
...
#Injectable()
export class SocketService {
private socket: SocketIOClient.Socket;
public initSocket(): void {
this.socket = socketIo(SERVER_URL);
}
public onEvent<T>(event: IOEventName): Observable<T | Array<T>> {
return new Observable<T>(observer => {
this.socket.on(event, (data: T) => observer.next(data));
});
}
public destroy() {
if (this.socket) {
this.socket.removeAllListeners();
this.socket.close();
this.socket = undefined;
}
}
}
And use it in any components:
import { SocketService, IOEventName, IEventName1Message, IEventName2Message }
from 'app/shared/io/io.service';
export class AppComponent implements OnInit, OnDestroy {
constructor(private socketService: SocketService) { }
ngOnInit() {
this.socketService.initSocket();
this.socketService
.onEvent<IEventName1Message>(IOEventName.EVENT_NAME_1)
.subscribe(data => { /* message received */ });
this.socketService
.onEvent<IEventName2Message>(IOEventName.EVENT_NAME_2)
.subscribe(data => { /* message received */ });
}
ngOnDestroy() {
this.socketService.destroy();
}
}

How to receive data from client using socket.io events inside express controller?

I am using Express framework with TypeScript:
I want to get client location at login using Socket IO, so on the client side, i made an emit event on login page. On the server side i tried to integrate a socket event into the login controller, which is placed before the response is sent back to the client, but the event from the server fires up just after i'm already signed in and clicked on sign out button which leads me to login page again (this is the moment when i receive the location message on server side from console.log(data)).
This is how the authentication controller file (auth.controller.ts) looks like:
import { io } from '../server/https';
....
..
public authenticate(req: Request, res: Response) {
if(req.body.email && req.body.password) {
....
..
io.on('connection', (socket: SocketIO.Socket) => {
console.log('New Socket Connected!');
socket.on('client-location', (data) => {
console.log(data);
});
socket.on('disconnect', (reason) => {
console.log(reason);
});
});
res.status(200).json({
resType: 'success',
token: 'Bearer ' + token,
userId: user.id,
message: 'Authenticated.',
loginNumber: result.session.length
});
};
....
..
}
The { io } import in the auth.controller.ts is the exported io constant from https.ts file.
Below is the https.ts file:
import socketIO from 'socket.io';
import HTTPS from 'https';
import app from '../app/index';
....
..
const options = {
cert: fs.readFileSync(path.resolve('../../../certificates/ca.crt')),
key: fs.readFileSync(path.resolve('../../../certificates/ca.key'))
}
export const server = HTTPS.createServer(options, app)
.listen(process.env.HTTP_SERVER_PORT, () => {
console.log(`Platform Server is running from
${process.env.HTTP_SERVER_HOST}, port: ${process.env.HTTP_SERVER_PORT}`);
});
export const io = socketIO.listen(server);
Something is not synchronized and i don't get it.
The client side is wrote in Angular 6 and the component from where the event is emited is below:
import { Component, OnInit } from '#angular/core';
import { LoginService } from '../../services/login.service';
import { Router } from '#angular/router';
import * as io from 'socket.io-client';
import { env } from '../../../../../environments/environment';
#Component({
selector: 'login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
public positionOptions = {
enableHighAccuracy: true,
maximumAge: 0
};
public LoginFormModel: any = {};
private URL = `${env.WS_SERVER_URL}:${env.HTTP_SERVER_PORT}`;
private socket;
constructor(private loginController: LoginService,
private router: Router) {
this.socket = io(this.URL);
}
ngOnInit() {}
public emitLocation() {
navigator.geolocation.getCurrentPosition(position => {
const { latitude: lat, longitude: lng } = position.coords;
console.log({ lat, lng });
this.socket.emit('client-location', { lat, lng });
},
err => {
console.log(err);
}, this.positionOptions);
}
loginEvent() {
this.loginController.login(this.LoginFormModel.email.value,
this.LoginFormModel.password.value)
.subscribe(
result => {
this.loginController.createSession('token', result.token);
this.emitLocation();
this.router.navigate(['user/profile']);
},
err => {
console.log(err);
});
}
}

Resources