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

Question

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

Answer 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

希望对你有帮助。

Answer 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/

Answer 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)
});