在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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
采用call方式实现js继承
May 20 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
canvas时钟效果
Feb 16 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
JavaScript实现简单图片切换
Apr 29 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
php2html php生成静态页函数
2008/12/08 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JavaScript中Function详解
2015/02/27 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
什么是数组名
2012/05/10 面试题
优秀学生事迹材料
2014/02/08 职场文书
《菜园里》教学反思
2014/04/17 职场文书
计算机实训报告范文
2014/11/05 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers