ionic2/3实时聊天思路(socket.js)

一觉起来所有的外网都不能访问了，github都被墙了，郁闷。。。算了，进入正题

引入socket.js

可以使用cdn，也可以下载到本地，这里我选择的是下载到本地，然后在src/index.html引入即可，这里我的路径是：

  //建议：将之第一个引入，可以避免一些io未定义问题
  
  

集成服务（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

send
sendAll

文章到此结束了，想关注我进一步动态的可以关注我的Github
有问题可以在评论下指出，楼主还是初学者，不足之处望不吝赐教，感谢