一覺起來所有的外網(wǎng)都不能訪問了阱冶，github都被墻了，郁悶滥嘴。熙揍。。算了氏涩，進(jìn)入正題
引入socket.js
可以使用cdn届囚，也可以下載到本地，這里我選擇的是下載到本地是尖，然后在src/index.html引入即可意系，這里我的路徑是：
//建議：將之第一個(gè)引入，可以避免一些io未定義問題
<!-- 引入socket.io -->
<script src="assets/js/socket.js"></script>
集成服務(wù)（socket.service.ts）
由于可能會(huì)被多個(gè)頁面使用到饺汹，所以這里我們創(chuàng)建一個(gè)服務(wù)來減少重復(fù)的操作蛔添。
在src下創(chuàng)建一個(gè)文件夾provider，然后新建一個(gè)文件socket.service.ts兜辞，
將此服務(wù)注入到app.component.ts中的provider迎瞧，寫入下列代碼：
import { Injectable } from '@angular/core';
declare const io;
@Injectable()
export class SocketService {
url:string='http://10.11.163.178:3000/';
socket:any=io(this.url);
sendName(name){
this.socket.emit('sendName',name);
}
//私聊
send(msg,to){
this.socket.emit('privateMsg', {msg:msg,to:to });
}
//群聊
sendAll(msg){
this.socket.emit('publicMsg', msg);
}
//接受信息
waitMsg(){
this.socket.on('privateMsg',(msg)=>{
console.log(msg);
})
this.socket.on('publicMsg',(msg)=>{
console.log(msg);
})
}
}
//注意：文中的url是指服務(wù)端的地址，例如我這里填寫的是我的局域網(wǎng)ip逸吵，端口3000凶硅。
Node服務(wù)端編寫（index.js）
實(shí)際中用戶名與id應(yīng)當(dāng)存入數(shù)據(jù)庫(kù)中便于記錄管理，這里我為了簡(jiǎn)化將它們放置在服務(wù)端的一個(gè)數(shù)組users[ ]中扫皱。
var users = [];//定義用戶合集
//定義數(shù)組的搜索方法
Array.prototype.find = function (value,type) {
if(!type) type='name';
for (var i = 0; i < this.length; i++) {
if (this[i][type] == value) return this[i];
}
return null;
}
//定義數(shù)組的移除方法
Array.prototype.remove = function (item) {
for (var i = 0; i < this.length; i++) {
if (this[i].name == item.name){
this.splice(i,1);
return ;
}
}
return null;
}
io.on('connection', function (socket) {
var id = socket.id;
console.log('id:' + id);
//接收用戶名
socket.on('sendName', function (name) {
users.push({ id: id, name: name });
console.log(users);
console.log(name + '上線了');
});
//斷開連接時(shí)移出
socket.on('disconnect', function () {
console.log(socket.id);
var user = users.find(socket.id,'id');
if (user) {
users.remove(user);
console.log(user.name + '已被移出');
}
});
//私聊消息
socket.on('privateMsg', function (info) {
console.log(users);
var user = users.find(info.to);
if (user) {
var id = user.id;
io.sockets.connected[id].emit('privateMsg', info.msg);
}
else console.log('目標(biāo)角色已下線');
})
//全體消息
socket.on('publicMsg', function (msg) {
socket.broadcast.emit('publicMsg', msg);
});
客戶端引用
chat.ts
這里作一個(gè)簡(jiǎn)單的示范足绅，只寫出關(guān)鍵代碼
export class ChatPage {
//from和to均需自己定義，這里只是示范
from:string='張三';
to:string='李四';
constructor(public ss:SocketService) {
}
ionViewDidLoad() {
//進(jìn)入頁面時(shí)將自己用戶名發(fā)送給服務(wù)器
this.ss.sendName(this.from);
this.ss.waitMsg();
console.log('ionViewDidLoad ChatPage');
}
send(msg,to){
this.ss.send(msg,this.to);
}
sendAll(msg){
this.ss.sendAll(msg);
}
}
注意： 這里為了簡(jiǎn)化韩脑，waitMsg()函數(shù)在頁面載入時(shí)觸發(fā)氢妈。實(shí)際應(yīng)用應(yīng)該注入進(jìn)app.component.ts中，platform.ready()時(shí)就應(yīng)該觸發(fā)段多。這樣可以防止多次載入頁面多次定義waitMsg()首量，進(jìn)而收到重復(fù)的消息。該消息次數(shù)每次遞增1！
chat.html
<button ion-button (click)="send('你好')">send</button>
<button ion-button (click)="sendAll('你好')">sendAll</button>
文章到此結(jié)束了加缘，想關(guān)注我進(jìn)一步動(dòng)態(tài)的可以關(guān)注我的Github
有問題可以在評(píng)論下指出粥航，樓主還是初學(xué)者危队，不足之處望不吝賜教涂佃，感謝
