使用 angular 5 的 socket.io 连接到套接字

Posted 2023-04-18

【中文标题】使用 angular 5 的 socket.io 连接到套接字

【英文标题】：Connect to socket using socket.io with angular 5

【发布时间】：2018-06-03 09:36:47

【问题描述】：

我有 .net 套接字服务器，我使用带有角度的 socket.io 成功连接到它..但是我找不到如何将数据发送到服务器并从中接收..谁能帮助我

【问题讨论】：

How to use socket.io-client in angular 4的可能重复

【参考方案1】：

使用 Observables 并编写一个 Angular 服务，其中包含向服务器发送 listen 和 send 消息的方法：

import  Injectable  from '@angular/core';
import  Observable  from 'rxjs/Observable';
import  Observer  from 'rxjs/Observer';
import  Message  from '../model/message';

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

const SERVER_URL = 'https://yourserverhost.com/';

    @Injectable()
    export class SocketService 
        private socket;

        public initSocket(): void 
            this.socket = socketIo(SERVER_URL);
        

        public send(message: Message): void 
            this.socket.emit('message', message);
        

        public onMessage(): Observable<Message> 
            return new Observable<Message>(observer => 
                this.socket.on('message', (data: Message) => observer.next(data));
            );
        
    

在这里找到一个使用 WebSockets、Node.js 和 Angular 完全用 TypeScript 编写的完整应用程序：https://github.com/luixaviles/socket-io-typescript-chat

希望对你有帮助。

【参考方案2】：

要将数据发送到服务器，您应该使用套接字。emit() 函数如下：

io.on('connection', function(socket)
  socket.emit('server method', dataToSend);
);

要从服务器接收数据，您应该监听服务器功能。为此目的存在 socket.on() 方法：

.on('connection', function(socket)
  socket.on('server method', function(msg)
    console.log('message: ' + msg);
  );
);

您可以阅读有关发送和接收数据的更多信息： https://socket.io/get-started/chat/

以下是一些使用 socket.io 和 Angular 项目的链接： https://medium.com/@vipinswarnkar1989/socket-io-in-mean-angular4-todo-app-29af9683957f https://tutorialedge.net/typescript/angular/angular-socket-io-tutorial/

【讨论】：

抱歉，客户端没有调用 socket.on('connect')

你能提供代码吗，你用来连接套接字？

import * as socketIo from ‘socket.io-client’; var socket = socketIo.connect('172.18.13.3:8080')

【参考方案3】：

我也需要这个，socket.io-client API 不太适合 Angular 应用程序，它应该用 rxjs 包装，恕我直言。

这就是我创建一个非常小的包装库的原因。

https://github.com/harunurhan/rx-socket.io-client

你可以像下面这样使用它：

const socket = new RxSocket('/url/to/socket.io/server');

const event$ = socket.subject('event_name'); // get rxjs/Subject for a specific event

event$.subscribe((data) =>  // read data
  console.log(data.foo)
);

event$.next(foo: 'bar'); // send data

// create observables for events that you want to only listen (receive data)
const event$ = socket.observable('event_name'); // get rxjs/Observable for a specific event

event$.subscribe((data) =>  // read data
  console.log(data.foo)
);