[英]How to import socket.io-client in a angular 2 application?
[英]How to use socket.io-client in angular 4
服務器端是 php laravel echo websocket,我正在嘗試通過 Angular 4 進行連接。我嘗試使用 ng2-socket-io - npm 和 laravel-echo - npm,但沒有一個成功。 如果有人知道我如何使用它的任何文檔或教程,請幫助
嗨@giga 下面給出了工作示例。
設置
npm i socket.io-client --save
npm i @types/socket.io-client --save
服務器端(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);
});
客戶端 - Angular4 代碼
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 = '';
}
}
設置
npm install socket.io-client --save
注意 2021:不要安裝@types/socket.io-client
因為這些類型現在包含在socket.io-client
(v3) 包中,因此可能會導致問題( source )。
服務:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { io, Socket } from 'socket.io-client';
@Injectable()
export class ChatService {
private socket: Socket;
constructor() {
this.socket = io('http://localhost:3000');
}
// EMITTER example
sendMessage(msg: string) {
this.socket.emit('sendMessage', { message: msg });
}
// HANDLER example
onNewMessage() {
return new Observable(observer => {
this.socket.on('newMessage', msg => {
observer.next(msg);
});
});
}
}
在一個組件中:
import { Component, OnInit } from '@angular/core';
import { ChatService } from './chat-service';
@Component({
// ...blabla...
})
export class ChatComponent implements OnInit {
msgInput: string = 'lorem ipsum';
constructor(
private chatService: ChatService,
) { }
ngOnInit() {
this.chatService.onNewMessage().subscribe(msg => {
console.log('got a msg: ' + msg);
});
}
sendButtonClick() {
this.chatService.sendMessage(this.msgInput);
}
}
按照@MA-Maddin的解決方案,我做了這個實現:
在服務:socket.service
import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SocketService {
private socket:SocketIOClient.Socket;
constructor() {
this.socket=io('http://localhost:3300');
}
emit(event:string, data:any){
this.socket.emit(event,data);
}
on(event:string){
return Observable.create(observer=>{
this.socket.on(event,data=>{
observer.next(data);
});
})
}
}
在組件
import { Component, OnInit, Input, ViewChild, ViewEncapsulation} from
'@angular/core';
import { AuthService } from 'src/app/auth/auth.service';
import Socket from '../../services/socket.service';
@Component({
selector: 'app-lobby-chat',
templateUrl: './lobby-chat.component.html',
styleUrls: ['./lobby-chat.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class LobbyChatComponent implements OnInit {
constructor(private socket:Socket) {
this.socket.on('getMessage').subscribe(data=>{
console.log(data);
});
}
pushMessage(msg){
this.socket.emit('sendMessage',msg);
}
}
這將正確更新您的綁定。 注意:**使用 npm i "@types/socket.io-client 來使用或定義 Socket io 類型 **
此外,您需要安裝 VithuBati 的答案: npm i socket.io-client --save npm i @types/socket.io-client --save
我知道這是一個老問題,對我來說,沒有一個解決方案有效,所以我用下面的方法解決了。
如果您的套接字連接輪詢工作正常並且沒有出現任何錯誤,請不要浪費您的時間,這可能是由於 socket.io.client 包與您的其他設置沖突
我的應用程序版本如下。
Angular 12.x
Socket.io.client 4.x
Node 14.16.1
我也嘗試過 ngx-socket-io 包,但也沒有用。 奇怪的部分是 socket.io poling 效果很好,握手是正確的,但無法監聽新消息的事件。
所以我最后的方法是將 socket.io 手動添加到 index.html 的 angular 和 dispatch 和 event 到組件。
function RsCustomEvent ( event, message ) {
params = { bubbles: false, cancelable: false, detail: message };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
var socket = io('localhost:3000');
socket.on("channel-name", function (message) {
window.dispatchEvent(RsCustomEvent('socketEventListen',message));
});
然后在我在下面的代碼中使用的角度組件中。
import { Observable , fromEvent} from 'rxjs';
fromEvent(window, 'socketEventListen').subscribe((data) =>{
});
手動下載 socket.io 客戶端 js 文件並將其放在資產文件夾中並使用上述代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.