WebSocket 介绍以及配合 STOMP 的使用

// 客户端主要代码
var sockjs_url = '/echo';
var sockjs = new SockJS(sockjs_url);

sockjs.onopen    = function()  {print('[*] open', sockjs.protocol);};
sockjs.onmessage = function(e) {print('[.] message', e.data);};
sockjs.onclose   = function()  {print('[*] close');};

// 产生交互信息
sockjs.send(‘some message’);

COMMAND
header1:value1
header2:value2

Body^@

// 客户端：
SEND			// 发送消息到服务端，可添加自定义的 header，body 携带内容
SUBSCRIBE		// 用于注册给定目的地send帧，被注册的目的地收到任何消息豆浆通过MESSAGE帧发送过来
UNSUBSCRIBE	// 取消注册监听
BEGIN			// 事务操作开始
COMMIT			// 事务提交
ABORT			// 事务过程中的回滚
ACK			// 确认订阅消息的消费
NACK			// NACK有ACK相反地作用。它地作用是告诉 server client 不想消费这个消息
DISCONNECT		// 断开连接
// 服务端
CONNECT		// 连接建立
RECEIPT		// server 成功处理请求带有 receipt 的 client frame 后的返回
ERROR			// 如果出错的话，server将发送ERRORframe
MESSAGE		// 将订阅的消息发送给client

// 服务端主要代码：
var http = require("http");
var StompServer = require('stomp-broker-js');

var server = http.createServer();

server.listen(61614);

var stompServer = new StompServer({
  server: server,
  path: '/stomp'
});
// 将监听的客户端放入列表中，方便服务端在接受到消息之后进行转发
stompServer.on('connected', function(sessionId, headers){
  var clientId = headers.clientId;
  if(clientId) {
    clients.push(clientId);
  }
});

stompServer.on('error', function(error) {
  // 将订阅对象减少一个(错误对象)
  clients.splice(clients.length - 1, 1);
  return;
});

// 在每次对应的 roomid 频道收到消息时，转发给所有的订阅者
stompServer.subscribe(config.desination, function(msg, headers) {
  for(var i = 0; i < clients.length; i++) {
    // 如果时debug，打印每次的请求和消息
    if(config.debug) {
      console.log('header: \n' + headers);
      console.log('msg: \n' + msg);
    }
    // 消息转发
    stompServer.send(clients[i], {'content-type': 'application/json'}, JSON.stringify({
      headers: headers,
	  msg: msg
    }));
  }
});

// 当调用 websocket 的 send 方法的时候
this.send = function (topic, headers, body) {
  // 将消息内容组装成 stomp 协议的一帧
  var _headers = {};
  if (headers) {
    for (var key in headers) {
      _headers[key] = headers[key];
    }
  }
  var frame = {
    body: body,
    headers: _headers
  };
  var args = {
    dest: topic,
    frame: this.frameParser(frame)
  };
  this.onSend(selfSocket, args);
}

this.onSend = function (socket, args, callback) {
  ...
  this.emit('send', {frame: {headers: frame.headers, body: bodyObj}, dest: args.dest});
  // 将消息发送给订阅方
  this._sendToSubscriptions(socket, args);
  if (callback) {
    callback(true);
  }
};

this._sendToSubscriptions = function (socket, args) {
  ...
  // 确定订阅方，凭借上 command，进行发送
  args.frame.command = "MESSAGE";
  var sock = sub.socket;
  if (sock !== undefined) {
    stomp.StompUtils.sendFrame(sock, args.frame);
  } else {
    this.emit(sub.id, args.frame.body, args.frame.headers);
  }
};
// 发送的时候，还是采用 WebSocket 的发送
function sendFrame(socket, _frame) {
  var frame_str = null;
  if (!_frame.hasOwnProperty('toString')) {
    var frame = new Frame({
      'command': _frame.command,
      'headers': _frame.headers,
      'body': _frame.body
    });
    frame_str = frame.toString();
  } else {
    frame_str = _frame.toString();
  }
  // WebSocket 发送
  socket.send(frame_str);
  return true;
}

// 客户端主要代码:
var url = "ws://localhost:61614/stomp";
var client = Stomp.client(url);

function afterConnect(roomid) {
  btn.addEventListener('click', function () {
    var msg = input.value;
    // 发送信息
    client.send(roomid, {}, msg);
  }, false);
}

function createConnect(roomid, uid) {
  client.connect(headers, function (error) {
    if (error.command == "ERROR") {
      console.error(error.headers.message);
    } else {
      afterConnect(roomid);
      // 订阅自己的客户端id，方便收到服务器发送过来的信息
      client.subscribe(uid, function (msg) {
        var body = msg.body;
        if (msg.headers['content-type'] == 'application/json') {
          body = JSON.parse(msg.body)
        }
      });
    }
  });
}