如何使用Socket-io.client在Angular中获取socket-id

时间:2019-01-01 16:14:41

标签: socket.io angular6 client-side

在我的有角度的应用程序中,我正在使用socket.io-client npm软件包与另一个节点服务器进行套接字io通信。

我有以下相同的代码。

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class DataService {

 constructor() { }
 private url = 'http://localhost:3000';
 private socket;


 getLiveData1() {
   let observable = new Observable(observer => {
    this.socket = io(this.url);
    console.log("THIS SOCKET IS:getLiveData1");
    this.socket.on('connect', function() {
     console.log("on connect:THIS SOCKET IS id is");

     console.log(this.socket.id);

     console.log(this.socket.socket.id);
    });
    this.socket.on('message', (data) => {
    observer.next(data);
  });
  return () => {
    this.socket.disconnect();
  }
})
return observable;
}

我试图仅在connect事件上访问客户端ID。  this.socket.on('connect',function(){      console.log(“在连接上:此套接字ID为”);

 console.log(this.socket.id);

 console.log(this.socket.socket.id);
});

但是我尝试使用以下两种日志语句来记录套接字ID的错误:this.socket.id or this.socket.socket.id错误地指出this.socketundefined 在这种情况下如何获取客户端的套接字ID?

2 个答案:

答案 0 :(得分:0)

来自文档 https://socket.io/docs/client-api/#socket-id

socket.id (串) 套接字会话的唯一标识符。在触发连接事件后设置,并在重新连接事件后更新。

const socket = io('http://localhost');

console.log(socket.id); // undefined

socket.on('connect', () => {
  console.log(socket.id); // 'G5p5...'
});

您做对了,您使用的是es5函数,没有保持this上下文。用箭头功能替换它。或绑定上下文。

this.socket.on('connect', /* arrow function */() => {
     console.log("on connect:THIS SOCKET IS id is");

     console.log(this.socket.id);
});

答案 1 :(得分:0)

这对我有用(角度6)

  ngOnInit(): void {

this.socket = io.connect('http://localhost:5000');
this.socket.on('connect', this.socketOnConnect)}

上面是套接字的初始化代码,并将一个角度方法绑定到“ ON CONNECT”方法

  socketOnConnect() {
console.log('connected');
var socket = this;
console.log(socket['id']);  } // prints socket id

socket_on_connect方法具有Socket本身的作用域,因此,如果在方法内部使用this,它将显示套接字对象。因此上述方法有效

使用了npms

"@types/socket.io-client": "^1.4.32"
 "socket.io-client": "^2.3.0"