一觉起来所有的外网都不能访问了，github都被墙了，郁闷。。。算了，进入正题
引入socket.js
可以使用cdn，也可以下载到本地，这里我选择的是下载到本地，然后在src/index.html引入即可，这里我的路径是：
//建议：将之第一个引入，可以避免一些io未定义问题
<!-- 引入socket.io -->
<script src="assets/js/socket.js"></script>
集成服务（socket.service.ts）
由于可能会被多个页面使用到，所以这里我们创建一个服务来减少重复的操作。
在src下创建一个文件夹provider，然后新建一个文件socket.service.ts，
将此服务注入到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是指服务端的地址，例如我这里填写的是我的局域网ip，端口3000。
Node服务端编写（index.js）
实际中用户名与id应当存入数据库中便于记录管理，这里我为了简化将它们放置在服务端的一个数组users[ ]中。
var users = [];//定义用户合集
//定义数组的搜索方法
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;
}
//定义数组的移除方法
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 + '上线了');
});
//断开连接时移出
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('目标角色已下线');
})
//全体消息
socket.on('publicMsg', function (msg) {
socket.broadcast.emit('publicMsg', msg);
});
客户端引用
chat.ts
这里作一个简单的示范，只写出关键代码
export class ChatPage {
//from和to均需自己定义，这里只是示范
from:string='张三';
to:string='李四';
constructor(public ss:SocketService) {
}
ionViewDidLoad() {
//进入页面时将自己用户名发送给服务器
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);
}
}
注意： 这里为了简化，waitMsg()函数在页面载入时触发。实际应用应该注入进app.component.ts中，platform.ready()时就应该触发。这样可以防止多次载入页面多次定义waitMsg()，进而收到重复的消息。该消息次数每次递增1！
chat.html
<button ion-button (click)="send('你好')">send</button>
<button ion-button (click)="sendAll('你好')">sendAll</button>
文章到此结束了，想关注我进一步动态的可以关注我的Github
有问题可以在评论下指出，楼主还是初学者，不足之处望不吝赐教，感谢
