快活林资源网 Design By www.csstdc.com
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通信就完成了,效果图如下:
启动服务
前端页面
如果遇到跨域问题,大概率是没有处理跨域,检查自己的代码和端口号是否正确,详情参考handing-cors
另外,如果遇到(本人遇到了,愣是在网上找了半天依然未果)
POST http://localhost:4000/socket.io/"htmlcode">
import { io } from 'socket.io-client';
在网上看到很多人是这样写的 import * as io from ‘socket.io-client',这种写法在typescript中是会报错的,改成上面的写法即可。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- 武曼《偏爱HQ》头版限量编号[低速原抓WAV+CUE]
- 许佳琪《4 Letters Long (坠)》[320K/MP3][22.95MB]
- 许佳琪《4 Letters Long (坠)》[FLAC/分轨][73.62MB]
- SALLY李莎丽《EASTERN YOUTH》[320K/MP3][14.49MB]
- 原音母版1:1直刻《民谣精逊[低速原抓WAV+CUE]
- 原音母版1:1直刻《卓依婷精选集》[低速原抓WAV+CUE]
- 【佛之吧沙发】VA-BuddhaBar-BestOf2byRavin(FLAC)
- [ABC唱片]-《雪莉—蓝》[SACD-008][SACD][WAV+CUE]
- 黎瑞恩.2002-理想的日子精选2CD【环球】【WAV+CUE】
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV