Javascript 如何在angular 4中使用socket.io-client

服务器端是php laravel echo websocket，我正在尝试通过Angular 4进行连接。我尝试使用ng2套接字io-npm和laravel echo-npm，但都没有成功。如果有人知道我如何使用它的任何文档或教程，请帮助

Hi@giga工作示例如下

设置

npm i socket.io-client --save
npm i @types/socket.io-client --save

服务器端（nodejs）

客户端-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 = '';
  }

}

从'@angular/core'导入{Component，OnInit}；
从“socket.io客户端”导入*作为io；
@组成部分({
moduleId:module.id，
选择器：“ch home”，
样式URL:['home.styles.css']，
templateUrl:'home.template.html'
})
导出类HomeComponent实现OnInit{
messageText:string；
消息：数组；
socket:SocketIOClient.socket；
构造函数（）{
//this.socket=io.connect（'http://localhost:8000');
this.socket=io.connect（）；
}
恩戈尼尼特（）{
this.messages=新数组（）；
this.socket.on（'message-received'，（msg:any）=>{
this.messages.push（msg）；
控制台日志（msg）；
console.log（this.messages）；
});
this.socket.emit（'event1'{
msg:'客户端到服务器，你能听到我的服务器吗？'
});
this.socket.on（'event2'，（数据：any）=>{
console.log（data.msg）；
this.socket.emit（'event3'{
味精：“是的，它对我有用！！”
});
});
this.socket.on（'event4'，（数据：any）=>{
console.log（data.msg）；
});
}
sendMessage（）{
常量消息={
text:this.messageText
};
this.socket.emit（'send-message'，message）；
//console.log（message.text）；
this.messageText=''；
}
}

将socket.io-client作为角度服务实现 设置

npm安装socket.io-client--保存

注意2021:不要安装

@types/socket.io client

，因为这些类型现在包含在

socket.io client

（v3）包中，因此可能会导致问题（）

服务：

从'@angular/core'导入{Injectable}；
从“rxjs”导入{Observable}；
从“Socket.io客户端”导入{io，Socket}；
@可注射（）
出口类聊天室服务{
专用插座：插座；
构造函数（）{
this.socket=io（'http://localhost:3000');
}
//发射器
sendMessage（消息：字符串）{
emit（'sendMessage'，{message:msg}）；
}
//处理者
onNewMessage（）{
返回新的可观察对象（观察者=>{
this.socket.on（'newMessage'，msg=>{
下一个观察员（msg）；
});
});
}
}

在组件中：

从'@angular/core'导入{Component，OnInit}；
从“./chat service”导入{ChatService}；
@组成部分({
//……等等。。。
})
导出类组件实现OnInit{
msgInput:string='lorem ipsum'；
建造师(
私人聊天室服务：聊天室服务，
) { }
恩戈尼尼特（）{
this.chatService.onNewMessage（）.subscribe（msg=>{
log（'得到消息：'+msg）；
});
}
sendButtonClick（）{
this.chatService.sendMessage（this.msgInput）；
}
}

除VithuBati的答案外，您还需要安装：

npm i socket.io-client--保存
npm i@types/socket.io-client--保存

遵循@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);
   });
  })
 }
}

At组件

 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类型**

谢谢您的帮助您能为此提供帮助吗question@GigaSongulashvili嘿，你是如何将它与laravel联系起来的？@VithuBati，什么是event1、event2、event3、event4？它们是函数名吗？像函数（或方法）您创建了具有http请求的？我这样做了，但我在更新聊天模板时遇到问题，事件上的套接字io没有正确更新我的模板，所以我也必须运行第二个cmd？SocketIOClient.socket“在我的项目中找不到命名空间…是的。第二个是必需的。您好，这里我发现有人已经实现了socket.io，请检查我的代码并告诉我问题出在哪里？sendMessage（msg:string）{this.socket.emit（'sendMessage'，{message:msg}）；}我如何在这里发送确认？这是套接字io的正确实现，因为第一个在更新组件的templateshello中的数据时工作不好，在这里我发现有人已经实现了socket.io，请检查我的代码并告诉我问题出在哪里？您好，这里我发现有人已经实现了socket.io，请检查我的代码并告诉我问题出在哪里？仅供参考：Observer.create（）已弃用。

private socket:SocketIOClient.socket这行给出了错误？任何解决方案都不是完整的，
私有套接字：SocketIOClient.socket
de donde estas trayendo el
SocketIOClient
？？？Enzo instala los types de socket con el-comando“npm i@types/socket.io client”
 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);
  }
}