在Angular项目使用socket.io实现通信的方法

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 30 4

npm install express socket.io socket.io-client

"express": "^4.17.1","socket.io": "^3.0.4","socket.io-client": "^3.0.4",

const app = require("express")();const http = require("http").createServer(app);const io = require("socket.io")(http, { cors: {  // 处理跨域问题  origin: "http://localhost:4300", // angular项目的启动端口，默认4200，本人项目的启动端口为4300，大家根据自己情况修改  methods: ["GET", "POST"],  credentials: true }});io.on("connection", (socket) => { console.log("user connected"); socket.on("add-message", (message) => {  io.emit("message", {type: "new-message", text: message}); });})http.listen(4000, () => { // 后台服务启动端口 console.log("start on 4000....");})

import { Injectable } from "@angular/core";import { Observable, Subject } from "rxjs";import { io } from "socket.io-client";@Injectable()export class ChatService { private url = "http://localhost:4000"; // 后台服务端口 private socket: any; sendMessage(message: any) {  this.socket.emit("add-message", message); } getMessages(): Observable<any> {  return new Observable(observer => {   this.socket = io(this.url, {withCredentials: true});   this.socket.on("message", (data) => {    observer.next(data);   });   return () => {    this.socket.disconnect();   }  }) }}

import { Component, OnInit, OnDestroy } from "@angular/core";import { ChatService } from "./chat.service";@Component({ selector: "test-chat", template: `<div *ngFor="let message of messages">        {{message.text}}       </div>       <input [(ngModel)]="message" />       <button (click)="sendMessage()">Send</button>`, providers: [ChatService] // 注入依赖})export class TestChatComponent implements OnInit, OnDestroy { messages = []; connection: any; message: any; constructor(private chatService: ChatService) { } sendMessage() {  this.chatService.sendMessage(this.message);  this.message = ""; } ngOnInit() {  this.connection = this.chatService.getMessages()   .subscribe(message => {  // 组件初始化时订阅信息    this.messages.push(message);   }); } ngOnDestroy() {  this.connection.unsubscribe();  // 组件销毁取消订阅 }}

import { io } from "socket.io-client";

30 4 0

• Ruby 方法() 方法

  我想了解 Ruby 方法 methods() 是如何工作的。 我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。 我也看过 ruby​​-doc.org，但我没有找到这种方法。

• VBS教程：方法-Test 方法

  Test 方法 对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个

• VBS教程：方法-Replace 方法

  Replace 方法 替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。

• VBS教程：方法-Raise 方法

  Raise 方法 生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为

• VBS教程：方法-Execute 方法

  Execute 方法 对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string

• VBS教程：方法-Clear 方法

  Clear 方法 清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。 说明 在错误处理后，使用 Clear 显式地清除 Err 对象。此

• VBS教程：方法-CopyFile 方法

  CopyFile 方法 将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选

• VBS教程：方法-Copy 方法

  Copy 方法 将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F

• VBS教程：方法-Close 方法

  Close 方法 关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。 说明 下面例子举例说明如何使用 Close 方

• VBS教程：方法-BuildPath 方法

  BuildPath 方法 向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称

• VBS教程：方法-GetFolder 方法

  GetFolder 方法 返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy

• VBS教程：方法-GetFileName 方法

  GetFileName 方法 返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为

• VBS教程：方法-GetFile 方法

  GetFile 方法 返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject

• VBS教程：方法-GetExtensionName 方法

  GetExtensionName 方法 返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应

• VBS教程：方法-GetDriveName 方法

  GetDriveName 方法 返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec

• VBS教程：方法-GetDrive 方法

  GetDrive 方法 返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO

• VBS教程：方法-GetBaseName 方法

  GetBaseName 方法 返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必

• VBS教程：方法-GetAbsolutePathName 方法

  GetAbsolutePathName 方法 从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object

• VBS教程：方法-FolderExists 方法

  FolderExists 方法 如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项

• VBS教程：方法-FileExists 方法

  FileExists 方法 如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS