如何在node.js中使用socket.io? [英] How to use socket.io in angular with node.js?
问题描述
客户端使用Angular 6,服务器端使用node.js.
Clientside I used Angular 6 and Serverside i used node.js.
在angular 6控制台中,它会打印消息并
socket.io id({message: "Hello World", id: "6An-ctwlwbZZWrfMAAAB"})
使用下面的代码后.
Here in angular 6 console it print message and
socket.io id({message: "Hello World", id: "6An-ctwlwbZZWrfMAAAB"})
after using below code.
此代码正确或此代码中的任何更改bcoz我不确定此代码是否有助于纠正此错误.
this code is right or any change in this code bcoz I am not sure about this code kindly help to make correct this.
另一个查询是我的项目中有15个以上的组件,因此如何将该socket.io
通用用于所有组件,或者我必须将此app.component.ts
代码导入所有其他组件中.
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(服务器端)
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(客户端)
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));
}
}
}
推荐答案
实现此机制的一种方法是使用ngx-socket-io
,在模块级别或根级别上连接节点服务器,我已经在下面实现了
app.module.ts代码
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);
}
}
这篇关于如何在node.js中使用socket.io?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!