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


Posted in Javascript onJanuary 05, 2021

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实现通信内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 #Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 #Javascript
详解JavaScript中分解数字的三种方法
Jan 05 #Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
mapboxgl实现带箭头轨迹线的代码
Jan 04 #Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jquery获取节点名称
2015/04/26 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
js实现无缝轮播图
2020/03/09 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
django批量导入xml数据
2016/10/16 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python中创建二维数组
2018/10/17 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
拾金不昧感谢信
2015/01/21 职场文书
2015年老干部工作总结
2015/04/23 职场文书
初中美术教学反思
2016/02/17 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
python​格式化字符串
2022/04/20 Python