在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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
修改npm全局安装模式的路径方法
May 15 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
JavaScript常用工具方法封装
Feb 12 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 时间计算问题小结
2009/01/04 PHP
在JavaScript中调用php程序
2009/03/09 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
Laravel下生成验证码的类
2017/11/15 PHP
用cssText批量修改样式
2009/08/29 Javascript
js中的string.format函数代码
2020/08/11 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python实现把类当做字典来访问
2019/12/16 Python
Python和Sublime整合过程图示
2019/12/25 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
python 装饰器的使用示例
2020/10/10 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
什么是方法的重载
2013/06/24 面试题
室内设计自我鉴定
2013/10/15 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
教师求职信范文
2014/05/24 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书