Angular2 中如何使用 Web Socket 进行实时通讯

Web Socket 是一种支持在客户端和服务器之间双向通信的网络协议，它可以让前端应用程序实现实时通讯的功能。在 Angular2 中，我们可以使用一些 Angular2 组件和服务来实现 Web Socket 的使用。

安装 Web Socket 模块

在使用 Web Socket 前，我们需要在项目中安装 Web Socket 模块。可以使用 npm 包管理工具来安装，使用以下命令：

npm install --save ngx-socket-io

安装完成后，就可以在项目中使用 Web Socket 了。

创建 Web Socket 服务

创建 Web Socket 服务可以使用 Angular2 的 @Injectable() 装饰器和 Socket 服务。在 app.module.ts 中引入 SocketIoModule，并添加到 imports 数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

// 添加 WebSocket 配置
const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    SocketIoModule.forRoot(config) // 添加 WebSocket 模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后创建一个 Web Socket 服务 socket-service.ts：

import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Injectable({
  providedIn: 'root'
})
export class SocketService {
  public socket: Socket;

  constructor() {
    this.socket = new Socket({ url: 'http://localhost:3000', options: {} });
  }

  // 连接服务器
  connect() {
    this.socket.connect();
  }

  // 断开服务器
  disconnect() {
    this.socket.disconnect();
  }

  // 绑定事件
  on(event: string, callback: Function) {
    this.socket.on(event, callback);
  }

  // 发送数据
  emit(event: string, data: any) {
    this.socket.emit(event, data);
  }
}

使用 Web Socket

连接 Web Socket 服务器：

import { Component } from '@angular/core';
import { SocketService } from './socket-service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="connect()">Connect</button>
    <button (click)="disconnect()">Disconnect</button>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class AppComponent {
  constructor(private socketService: SocketService) {}

  // 连接服务器
  connect() {
    this.socketService.connect();
  }

  // 断开服务器
  disconnect() {
    this.socketService.disconnect();
  }

  // 发送消息
  sendMessage() {
    this.socketService.emit('message', 'Hello World!');
  }
}

在 Angular2 组件中，可以使用 SocketService 来创建并连接 Web Socket 服务器，然后使用 on() 或者 emit() 方法来发送和接收数据。例如，在上面的代码中，我们创建了一个 AppComponent 组件，使用 SocketService 中的方法来连接服务器、断开服务器和发送消息。

示范代码

下面我们来创建一个简单的示例程序，它可以连接到 Web Socket 服务器，并显示从服务器接收到的数据。

首先，在 app.component.ts 文件中，引入 SocketService 服务：

import { Component } from '@angular/core';
import { SocketService } from './socket-service';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="connect()">Connect</button>
      <button (click)="disconnect()">Disconnect</button>
      <button (click)="sendMessage()">Send Message</button>
    </div>
    <div>
      <ul>
        <li *ngFor="let message of messages">{{ message }}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  messages: string[] = [];

  constructor(private socketService: SocketService) {}

  // 连接服务器
  connect() {
    this.socketService.connect();
    this.socketService.on('message', (data: string) => {
      this.messages.push(data);
    });
  }

  // 断开服务器
  disconnect() {
    this.socketService.disconnect();
  }

  // 发送消息
  sendMessage() {
    this.socketService.emit('message', 'Hello World!');
  }
}

在 AppComponent 组件中，我们定义了一个 messages 数组，用于存储从服务器接收到的数据。在 connect() 方法中，我们使用 SocketService 中的 on() 方法来监听服务器发送的 message 事件，并将数据加入到 messages 数组中。在 sendMessage() 方法中，我们使用 emit() 方法来向服务器发送数据。

最后，在 app.module.ts 文件中，引入 SocketIoModule 模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
import { AppComponent } from './app.component';

// 配置 Web Socket
const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SocketIoModule.forRoot(config)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

示例代码完成了，思路还是比较清晰的，安装 Web Socket 模块，然后在项目中创建 Web Socket 服务，最后在使用 Web Socket 处理的组件中开始 Web Socket 的使用。

总结

本文介绍了 Angular2 中如何使用 Web Socket 进行实时通讯。我们首先安装了 Web Socket 模块，然后创建了一个 Web Socket 服务，最后在组件中使用 SocketService 来连接 Web Socket 服务器。我们还创建了一个简单的示例程序，它可以连接到 Web Socket 服务器，并显示从服务器接收到的数据。希望此篇文章能够对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65928a9deb4cecbf2d74e6d0