demo/test.htm

<meta charset='utf-8' />
<style>
div{
border:1px solid #ccc;box-shadow:0 0 10px #000;
}
#result{
clear: both;
position: relative;
margin: 10px;
top: 10px;
border: none;
border-top: 2px dashed #ccc;
overflow: scroll;
height: 90%;
padding: 13px;
box-shadow: 0 0 0 #f00;
background:#eee;
}
button{
float:left;margin-top:10px;margin-left:10px;width:100px;height:30px;
}
</style>
<div>
  <button onclick='sendMessage()'>发送消息</button>
  <div id='result'></div>
</div>
<script>
var r=0,rnd=function(){
  return Math.random()+(r++);
};

var queue=[];//消息队列，以保证一个消息的发送是不可分割的
var ws=new WebSocket('ws://127.0.0.1:8100');
ws.onclose=function(e){log('closed: '+e.reason)};
ws.onopen=function(){
  var message;
  setInterval(function(){
    //普通消息
    message=new msg;
    message.create({boundary:rnd()},true);
    message.appendMsgBody(JSON.stringify({
      point:[2334,34324],
      msg:'test',
      lng_lat:[23.234,432.23]
    }));
    queue.push(message);
    //超短消息
    message=new msg;
    message.create({nodata:true});
    queue.push(message);
    //二进制消息
    message=new msg;
    message.create({boundary:rnd()});
    message.appendMsgBody(new Blob(['hello'],{type:'image/jpeg'}));
    message.appendMsgBody(new Blob(['world'],{type:'image/jpeg'}));
    queue.push(message);
  },2000);
};
ws.onmessage=function(e){log(e.data)};
log=function(e){result.insertAdjacentHTML('afterBegin',e+'<br/>')};
setInterval(function(){
  if(queue.length){
    queue.shift().send(ws);
  }
},100);
function sendMessage(){
  var message=new msg;
  message.create({boundary:rnd()});
  message.appendMsgBody('发送一个测试消息');
  message.appendMsgBody('附加更多消息内容，使用\n换行');
  queue.push(message);
}
var msg=function(){};
//如果需要回复，这发送的头部会带上--k 随机字符串，接收的回复会包含--r 这个随机字符串
msg.prototype.create=function(option,needReply){
  this.data=[];
  if(needReply)this.data.push('--k '+Math.random());
  for(var what in option){
    this.data.push('--'+what.charAt(0)+(option[what]?' ':'')+option[what]);
    if(what==='boundary')this.boundary=option[what];
  }
  this.data=[this.data.join('\n')];
};
msg.prototype.appendMsgBody=function(what){this.data.push(what);};
msg.prototype.send=function(socket){
  if(this.boundary)this.data.push(this.boundary+'--');
  this.data.every(function(what){
    socket.send(what);
    return true;
  });
  delete this.data;
};
</script>