时间戳

首页 > 解决方案 > 套接字仅第一次发出数据

angular - 套接字仅第一次发出数据

问题描述

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

私人视频.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");
});

标签： angularsocketswebsocketsocket.ioionic4

解决方案

尝试这个

在节点 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
        });

推荐阅读