使用 socket 开发及时通信

开发环境

前端使用 socket.io-client 依赖，后端使用的是 nodejs+socket.io

前端：vue+socket.io-client

后端：nodejs+socket.io+underscore

前端核心代码

import io from 'socket.io-client'
export default {
  data(){
    socket: '', // socket进程
  },
  methods:{
    // 发布消息到服务器
    sned() {
			this.socket.emit('sayall', {
					from: this.username,
					to: 'all',
					msg: this.text
				})
    },
    // 退出登录
    signout(){
      // 断开连接
      this.socket.disconnect()
      // 销毁实例，不然socket会自动重连
			this.socket = null
    }
  },
  mounted() {
    // 初始化socket程序
    var devurl = 'ws://localhost:3000'
		var produrl = 'ws://47.94.22.162:3000'
		var socket = (this.socket = io(
			process.env.NODE_ENV === 'development' ? devurl : produrl
		))
		// 接受群消息
		socket.on('sayall', ({ from, to, msg }) => {
			// console.log(from, to, msg);
			this.msglist.push({
				from,
				to,
				msg
			})
			this.scrollBm()
		})
		// 链接成功后得到通知
		socket.on('connect', () => {
			console.log('连接成功')
			// 通知服务器用户上线
			socket.emit('online', { user: this.username })
		})
		// 链接失败
		socket.on('connect_error', () => {
			alert('链接失败')
		})

		// 客户端或服务器关闭了
		socket.on('disconnect', timeout => {
			console.log(timeout, '服务器关闭了')
		})
		// 上线通知
		socket.on('online', ({ user, users }) => {
			console.log('上线通知')
			this.ulist = users
		})
		// 下线通知
		socket.on('offline', ({ user, users }) => {
			this.ulist = users
		})
	}
  }
}

后端核心代码

// 开启socket
var app = require("express")();
var http = require("http").Server(app);
var io = require("socket.io")(http);
var _ = require("underscore");
var users = {}; //存储在线用户列表的对象
var clients = []; // 存储用户队列
io.on("connection", function(socket) {
  // 用户上线通知
  socket.on("online", function(data) {
    //将上线的用户名存储为 socket 对象的属性，以区分每个 socket 对象，方便后面使用
    socket.name = data.user;
    //users 对象中不存在该用户名则插入该用户名
    if (!users[data.user]) {
      users[data.user] = data.user;
      clients[data.user] = socket.id;
    }
    //向所有用户广播该用户上线信息
    io.sockets.emit("online", { users: users, user: data.user });
  });

  // 向所有人发话:data => {from,to,msg}
  socket.on("sayall", function(data) {
    //向其他所有用户广播该用户发话信息
    // socket.broadcast.emit("sayall", data);
    // 向所有人包括自己发送消息
    io.emit("sayall", data);
  });

  // 单独对话::data => {from,to,msg}
  socket.on("sayitem", function(data) {
    //向特定用户发送该用户发话信息
    var toId = clients[data.to];
    var toSocket = _.findWhere(io.sockets.sockets, { id: toId });
    // nodejs的underscore扩展中的findWhere方法，可以在对象集合中，通过对象的属性值找到该对象并返回。
    // socket.emit() ：向建立该连接的客户端广播
    // socket.broadcast.emit() ：向除去建立该连接的客户端的所有客户端广播
    // io.sockets.emit() ：向所有客户端广播，等同于上面两个的和
    // console.log(toSocket);
    // 通过该连接对象（toSocket）与链接到这个对象的客户端进行单独通信
    toSocket.emit("sayitem", data);
  });

  //有人下线
  socket.on("disconnect", function() {
    //若 users 对象中保存了该用户名
    if (users[socket.name]) {
      //从 users 对象中删除该用户名
      delete users[socket.name];
      //向其他所有用户广播该用户下线信息
      socket.broadcast.emit("offline", { users: users, user: socket.name });
    }
  });
});
//这里千万注意是http在监听
http.listen(3000, () => console.log("http://localhost:3000"));