在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 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
jquery密码强度校验
Dec 02 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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
PHP分页显示制作详细讲解
2006/10/09 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
原生JS轮播图插件
2017/02/09 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python遍历小写英文字母的方法
2019/01/02 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
南京某公司笔试题
2013/01/27 面试题
大学生优秀自荐信范文
2014/02/25 职场文书
节约电力资源的建议书
2014/03/12 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
活动宣传策划方案
2014/05/23 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
python垃圾回收机制原理分析
2022/04/13 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
浅谈Redis的事件驱动模型
2022/05/30 Redis