服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - angularjs - 在Angular项目使用socket.io实现通信的方法

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

2021-12-27 15:55陈仙生 angularjs

这篇文章主要介绍了在Angular项目使用socket.io实现通信的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

step1、为项目安装依赖

在终端输入以下命令为我们的angular项目安装express、socket.io、socket.io-client

npm install express socket.io socket.io-client

本人安装的各版本信息如下:

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

step2、编写后台服务

可以在项目中新建一个server文件夹,用来存放我们的后台服务,然后新建文件

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....");
})

step3、创建angular服务

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

这里我们创建了两个方法,sendMessage用于将客户端的信息发送给服务端,getMessages用于建立连接,监听服务端事件并返回一个可观察的对象。

step4、创建组件

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();  // 组件销毁取消订阅
 }
}

这样一个简单的socket通信就完成了,效果图如下:

启动服务

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

前端页面

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

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

如果遇到跨域问题,大概率是没有处理跨域,检查自己的代码和端口号是否正确,详情参考handing-cors

另外,如果遇到(本人遇到了,愣是在网上找了半天依然未果)
POST http://localhost:4000/socket.io/?EIO=3&transport=polling&t=NQtz_E3 400 (Bad Request)
这类的报错,npm安装socket.io-client(这也是为什么我在文章一开始就安装它),在service.ts文件引入

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

在网上看到很多人是这样写的 import * as io from ‘socket.io-client",这种写法在typescript中是会报错的,改成上面的写法即可。

到此这篇关于在Angular项目使用socket.io实现通信的文章就介绍到这了,更多相关Angular使用socket.io实现通信内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/qq_45745643/article/details/112173731

延伸 · 阅读

精彩推荐
  • angularjs教你用AngularJS框架一行JS代码实现控件验证效果

    教你用AngularJS框架一行JS代码实现控件验证效果

    简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。到底能简化到什么程度呢,今天我们来看下,一行代码实现控...

    AngularJS教程网8012022-01-03
  • angularjsangularjs实现与服务器交互分享

    angularjs实现与服务器交互分享

    AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。...

    angularjs教程网7312022-01-03
  • angularjsAngular框架详解之视图抽象定义

    Angular框架详解之视图抽象定义

    这篇文章主要给大家介绍了关于Angular框架详解之视图抽象定义的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习...

    被删6782022-02-24
  • angularjsAngularJS 中括号的作用详解

    AngularJS 中括号的作用详解

    这篇文章主要介绍了AngularJS 中括号的作用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    Java Pro8652022-02-22
  • angularjsangularJS提交表单(form)

    angularJS提交表单(form)

    这篇文章主要介绍了angularJS提交表单(form)的方法和示例,需要的朋友可以参考下...

    angularJS教程网3972022-01-03
  • angularjsAngular.JS中指令的命名规则详解

    Angular.JS中指令的命名规则详解

    这篇文章主要给大家介绍了关于Angular.JS中指令命名规则的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看...

    刘小光10402022-01-17
  • angularjsangularJS 中input示例分享

    angularJS 中input示例分享

    这篇文章主要介绍了angularJS 中input示例分享,需要的朋友可以参考下...

    angularJS教程网5652022-01-03
  • angularjsangularJS中router的使用指南

    angularJS中router的使用指南

    这篇文章主要介绍了angularJS中router的使用方法和示例分享,需要的朋友可以参考下...

    angularJS教程网8372022-01-03