Server side is php laravel echo websocket and I am trying to connect by Angular 4. I tried using ng2-socket-io - npm and also laravel-echo - npm but none of them were successfully. If anyone know any documentation or tutorial how I can use it, please help
Install socket.io clientAfter creating the angular app, we need to install the socket.io package to help us to communicate between client and server.
Socket.IO allows bi-directional communication between client and server. Bi-directional communications are enabled when a client has Socket.IO in the browser, and a server has also integrated the Socket.IO package. While data can be sent in a number of forms, JSON is the simplest.
socket-io. client is the code for the client-side implementation of socket.io. That code may be used either by a browser client or by a server process that is initiating a socket.io connection to some other server (thus playing the client-side role in a socket.io connection).
Hi @giga Working example is given below.
SETUP
npm i socket.io-client --save
npm i @types/socket.io-client --save
Server-side (nodejs)
var express = require('express');
var path = require('path');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var port = 8000;
app.use(express.static(path.join(__dirname, "public")));
io.on('connection', (socket) => {
console.log('new connection made');
socket.on('event1', (data) => {
console.log(data.msg);
});
socket.emit('event2', {
msg: 'Server to client, do you read me? Over.'
});
socket.on('event3', (data) => {
console.log(data.msg);
socket.emit('event4', {
msg: 'Loud and clear :)'
});
});
});
server.listen(port, () => {
console.log("Listening on port " + port);
});
Client-side - Angular4 code
import { Component, OnInit } from '@angular/core';
import * as io from 'socket.io-client';
@Component({
moduleId: module.id,
selector: 'ch-home',
styleUrls: ['home.styles.css'],
templateUrl: 'home.template.html'
})
export class HomeComponent implements OnInit {
messageText: string;
messages: Array<any>;
socket: SocketIOClient.Socket;
constructor() {
// this.socket = io.connect('http://localhost:8000');
this.socket = io.connect();
}
ngOnInit() {
this.messages = new Array();
this.socket.on('message-received', (msg: any) => {
this.messages.push(msg);
console.log(msg);
console.log(this.messages);
});
this.socket.emit('event1', {
msg: 'Client to server, can you hear me server?'
});
this.socket.on('event2', (data: any) => {
console.log(data.msg);
this.socket.emit('event3', {
msg: 'Yes, its working for me!!'
});
});
this.socket.on('event4', (data: any) => {
console.log(data.msg);
});
}
sendMessage() {
const message = {
text: this.messageText
};
this.socket.emit('send-message', message);
// console.log(message.text);
this.messageText = '';
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With