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

Posted

技术标签:

【中文标题】我如何通过角度向套接字服务器发送数据和获取数据【英文标题】: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)
    ;
  

【讨论】:

以上是关于我如何通过角度向套接字服务器发送数据和获取数据的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 iOS 中的套接字从服务器接收数据?

如何在角度应用程序中嵌入 Web 套接字的证书

如何使用 C++ 套接字编程同时向多个服务器发送数据?

在异步套接字中向特定客户端发送数据

socket如何通过代理服务器通讯,在线等

使用 Sockets 发送和接收数据