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中是会报错的，改成上面的写法即可。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。