套接字仅第一次发出数据答案

【问题标题】：Socket Emiting data only first time套接字仅第一次发出数据
【发布时间】：2020-07-29 13:22:00
【问题描述】：

我是角度方面的新手。我创建了一个从本地主机服务器接收数据的应用程序。但是我的角度组件只从服务器获取数据一次。当我下次打开页面时。它没有获取数据。它只触发一次事件。当我返回页面并返回我的套接字页面时，它没有获得价值。

private-video.ts

export class PrivateVideoPage {
  constructor(private webSocketservice:WebsocketService) {
  }
  
  ngOnInit()
  {
    console.log("hello")
    this.webSocketservice.listen('test event').subscribe((data)=>{
      console.log("socket data=>",data);
    })
  }
}

websocket.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import {Observable} from 'rxjs/Observable';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class WebsocketService{
    private socket;

    constructor() {
        this.socket = io('http://localhost:5000',{'multiplex': false});
     }

    listen(eventName:string)
    {
        return new Observable((subscriber)=>{
            this.socket.on(eventName,(data)=> {
                subscriber.next(data);
            });
        });
    }

    emit(eventName:string,data:any)
    {
        this.socket.emit(eventName,data);
    }
}

main.js(服务器)

let app = require("express")();
let http = require("http").Server(app);
let io = require("socket.io")(http);

io.on("connection", socket => {
  console.log("user connected");

  socket.on("disconnect", function() {
    console.log("user disconnected");
  });

  socket.on("message", message => {
    console.log("Message Received: " + message);
    io.emit("message", { type: "new-message", text: message });
  });

  data=[{id:1,name:'ashish'},{id:2,name:'mishra1'}];
  socket.emit('test event',data);
});

http.listen(5000, () => {
  console.log("started on port 5000");
});

【问题讨论】：

我认为您需要从main.js 中删除socket.emit 之前的data=[{id:1,name:'ashish'},{id:2,name:'mishra1'}]; 行。
@micronyks 这是我要发送的数据
您只在listen('test event') 上列出，所以只会收到[{id:1,name:'ashish'},{id:2,name:'mishra1'}]（一次）
@bubbles 是的，但是当我进入上一页并返回我的套接字页面时，它不会显示数据。为什么？以及如何解决它

标签： angular sockets websocket socket.io ionic4

【解决方案1】：

试试这个

在节点 index.js 中

// Init
const app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

export const socket = (update) => {
    io.sockets.emit('updates', {availability: update});
};

在角度

npm i ngx-socket-io

请在您的应用模块中导入

    import {SocketIoConfig, SocketIoModule} from "ngx-socket-io";

    const config: SocketIoConfig = { url: 'http://192.168.8.164:3000', options: {} };

    SocketIoModule.forRoot(config)

在您的服务文件中

    constructor(private socket: Socket) {

    }

    listenSocket() {
        return this.socket
            .fromEvent<any>('updates')
            .map(data => data.availability);
    }

在组件的 onInit 中

this.particularService.listenSocket()
        .subscribe(msg => {
          //do whatever u want
        });

【讨论】：