angular中使用 socket.io 实例代码

r囧r小猫 2022-11-13 00:59 244阅读 0赞

Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化。

首先前后端分别安装 socket.io-client 和 socket.io

npm install -S socket.io-client
    npm install -S socket.io

**实例一：最简单使用**

**angular:** app.component.ts

import { Component } from '@angular/core';
    import { ChatService } from './chat.service';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      msg = '';
      value = '';
      constructor(private chatService: ChatService) {
      }
    
      public send(): void {
        this.chatService.sendMessage(this.value);
        this.chatService.getMessage().subscribe((msg: string) => {
          this.msg = msg;
        })
      };
    }

**angular:** app.component.html

<input type="text" [(ngModel)]="value" /> 
    <button (click)="send()">发送</button>
    <br>
    {
       {msg}}

**angular:** chat.service.ts

import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';
    import { io } from 'socket.io-client';
    @Injectable({
      providedIn: 'root',
    })
    export class ChatService {
      private socket: any;
      constructor() {
        this.socket = io('http://localhost:3000', {
          path: '/status',
          reconnectionAttempts: 5,
          extraHeaders: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST, GET, PUT, OPTIONS, DELETE',
          },
        });
      }
      sendMessage(msg: string) {
        this.socket.emit('send-backend', msg);
      }
      getMessage() {
        return new Observable((observer) => {
          this.socket.on('send-frontend', (msg) => {
            observer.next(msg);
          });
        });
      }
    }

**express: index.js**

启动服务

![20210326163844729.png][]

输入内容，点击发送

![20210326163911117.png][]

可以看到信息成功返回

但是这有个问题，就是再用另一个浏览器时，其中一个浏览器发送信息，两个浏览器都会收到信息。

为什么会这样呢，是因为 **io**.emit('send-frontend', \`api-$\{message\}\`); 这行代码

io 是全局属性，所以是发送给所有客户端的，如果想只发送请求的客户端得用**socket**.emit('send-frontend', \`api-$\{message\}\`);

神奇吧。可以试一下。

**emit 还可以传多个参数**

socket.emit('send-frontend', socket.id, \`api-$\{message\}\`);

相应地，前台也需要接受两个参数

this.socket.on('send-frontend', (id, msg) => \{

console.log('id', this.socket.id)

observer.next(msg);

\});

**emit 可以向特定客户端发送消息**

socket.to(anotherSocketId).emit('send-frontend', socket.id, \`api-$\{message\}\`);

注意 anotherSocketId 不能是当前请求的 socket.id，即 to 方法不会 to 向自己。

但是如果是用 io 发送的话就没有问题了

**io**.to(anotherSocketId).emit('send-frontend', socket.id, \`api-$\{message\}\`);

**emit 可以一组客户端发送消息**

socket.join("room1");  
socket.to('room1').emit('send-frontend', socket.id, \`api-$\{message\}\`);  
io.to('room1').emit('send-frontend', socket.id, \`api-$\{message\}\`);

[20210326163844729.png]: /images/20221022/4b2da27b942d42de85d383b628548ca7.png
[20210326163911117.png]: /images/20221022/79f6afb6b41042d8aec2fade495adb1b.png