我如何通过角度向套接字服务器发送数据和获取数据

Posted 2023-04-18

【中文标题】我如何通过角度向套接字服务器发送数据和获取数据

【英文标题】：How can i send data and get data via angular to socket server

【发布时间】：2020-11-04 22:21:51

【问题描述】：

目前我正在尝试通过 Angular 客户端向套接字服务器发送和获取数据，并从套接字服务器向 Angular 发送和获取数据，我需要获取数据我能够推送数据但我需要知道如何将数据推送到 API是否存在于套接字服务器中并从 api 获取数据到套接字服务器并将其发送到客户端

下面是我的

用于从 Angular 客户端向套接字服务器发送数据

组件代码

构造函数（公共socketService：Socketioservice）

   

  ngOnInit()
     this.socketService.setupSocketConnection();
   
 // For sending post request
   sendMsg()
     this.socketService.sendData(this.title);
   
    // For getting the request
   getMsg()

    this.socketService.getMsg().subscribe(res => 
      console.log(res);
    )

Angular 服务代码

import * as io from 'socket.io-client';

import  Observable  from 'rxjs';

socket;
  constructor() 

  
  setupSocketConnection() 
    this.socket = io(environment.SOCKET_ENDPOINT);


  
  // for posting data
  sendData(values)
    console.log(values);
    this.socket.emit('my message', values);
  
   //for getting data
  getMsg()
   return Observable.create((observer) => 
    this.socket.on('grabMsg', (message) => 
        observer.next(message);
    );
);
  

节点服务器代码

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => 
  res.send('<h1>Hey Socket.io</h1>');
);
io.on('connection', (socket) => 
  console.log('a user connected');
  socket.on('disconnect', () => 
    console.log('user disconnected');
  );
  socket.on('my message', (msg) => 
      //here i want to consume api like 
      // localhost:3000(post) "title":"ss"

    console.log('message: ' + msg);
  );
  socket.on('grabMsg', () => 
        //here i want to consume api like 
      // localhost:3000(get)
      let ms = 'max'
      io.emit(ms);
  );
);
http.listen(3001, () => 
  console.log('listening on *:3001');
);

所以在这里我如何在套接字服务器中发送和发布数据 简而言之，我会将数据从 Angular 客户端发送到套接字服务器，然后再发送到某个 api

【问题讨论】：

rxjs-dev.firebaseapp.com/api/webSocket/webSocket

【参考方案1】：

//server-side
socket.on('grabMsg', () => 
  let ms = 'max'
  io.emit(ms);
);

//client-side
this.socket.on('grabMsg', (message) => 
    observer.next(message);
);

在上面的代码中，您也在客户端和服务器端使用 socket.on，根据您的要求使用一个作为发射作为一个。

在下面的代码中，你只是在发射，并且有第一个参数用于发射（任何包含在侧引号中的文本），如下面的代码

socket.on('grabMsg', () => 
  let ms = 'max'
  io.emit("thatText",ms);
);

同样的文本（thatText）也应该在客户端，比如

this.socket.on('thatText', (message) => 
   console.log(message)
);

【讨论】：

好的，但是如何获取客户端的get请求所发出的响应

那是因为这个socket.io id建立在事件发射器模块（node.js的内置模块）之上[详细可以参考这个文档] (nodejs.org/api/events.html) Socket.io 使用这个包来执行发射和监听事件，并且在服务器端，当你创建一个套接字服务器时，有一个为客户端提供服务的默认选项，但在这里你导入了那个包。

【参考方案2】：

您可以使用 nodeJs eventEmitter API。因此，当有人点击您的端点（GET 请求）时，您可以通过 eventEmitter 发出一个事件，并在您的套接字服务器中侦听该事件，反之亦然。

更多详情：- Custom Events in Node.js with Express framework

【参考方案3】：

    export class LiveSocket implements OnInit 

    //define a socket
    public socket = new WebSocket(environment.SOCKET_ENDPOINT);

    ngOnInit() 

     // Add an event listener for when a connection is open
    this.socket.onopen = () => 
      console.log('WebSocket connection opened. Ready to send messages.');
      // Send a message to the server
      this.socket.send('message');
    ;

    // Add an event listener for when a message is received from the server
    this.socket.onmessage = (message) => 
     //handle getting data from server 
     var data = JSON.parse(message.data);
     console.log(data)
    ;