websocket 连接方法

WebSocket协议支持（在受控环境中运行不受信任的代码的）客户端与（选择加入该代码的通信的）远程主机之间进行全双工通信。用于此的安全模型是Web浏览器常用的基于原始的安全模式。 协议包括一个开放的握手以及随后的TCP层上的消息帧。 该技术的目标是为基于浏览器的、需要和服务器进行双向通信的（服务器不能依赖于打开多个HTTP连接（例如，使用XMLHttpRequest或<iframe>和长轮询））应用程序提供一种通信机制。

 

下面是一般的websocket连接方法和demo；

仅仅只供参考:

var websocket = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window) {
	websocket = new WebSocket(urlObj.getSocket());
} else {
	alert('当前浏览器不支持websocket');
}

//连接发生错误的回调方法
websocket.onerror = function() {
	//alert("error");
	//setMessageInnerHTML("error");
};

//连接成功建立的回调方法
websocket.onopen = function(event) {
	//alert("open");
	//setMessageInnerHTML("open");
	var index = $.cookie("digBrow");
	if(index == 0) {
		send("hello~我已经上线了。");
	}
	index++;
	$.cookie("digBrow", index);
}

//接收到消息的回调方法
websocket.onmessage = function(event) {
	var json = JSON.parse(event.data);
	var img = (json.USER_HEADIMG).replace(/\~/g, "/");
	if(json.ID != null) {
		if(urlObj.getTokenObj().ID != json.ID) {
			//	var curr_time = moment().format('YYYY-MM-DD HH:mm:ss');
			var curr_time = getNowFormatDate();
			var msg = '';
			msg += '<li class="animated fadeInLeft media">';
			msg += '<a class="pull-left" href="#">';
			msg += img == 'undefined' || img == '' || img == null ? '<img class="media-object" style="border-radius:99px;width:60px;" alt="Generic placeholder image" src="img/avatars/avatar3.jpg">' : '<img class="media-object" style="border-radius:99px;width:60px;" alt="Generic placeholder image" src="' + getImgUrl(urlObj.url + img) + '">';
			msg += '</a>';
			msg += '<div class="media-body chat-pop">';
			msg += '<h4 class="media-heading">' + json.USER_NAME + '<span class="pull-right"><i class="fa fa-clock-o"></i> <abbr class="timeagos" title="' + curr_time + '" >' + curr_time + '</abbr> </span></h4></h4>';
			msg += json.msg;
			msg += '</div>';
			msg += '</li>';
			var list = $('.chat-window .chat-list');
			list.append(msg);
			jQuery("abbr.timeago").timeago();
			$('.chat-window .scroller').slimScroll({
				scrollTo: list.height()
			});
			var bwoserMesIMG = img == 'undefined' || img == '' || img == null ? '/img/avatars/avatar3.jpg' : getImgUrl(urlObj.url + img);
			msgBrowser.alert(json.USER_NAME + ":", json.msg, bwoserMesIMG);
		}
	}
}

//连接关闭的回调方法
websocket.onclose = function() {
	//	  alert("close");
	// setMessageInnerHTML("close");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
/*  window.onbeforeunload = function(){
      websocket.close();
  }*/

//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
	document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket() {
	websocket.close();
}

//发送消息
function send(message) {
	//var message = document.getElementById('text').value;
	//	  append();
	websocket.send(message);
}

//消息推送
var socket = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window) {
	socket = new WebSocket(urlObj.getMsgSocket());
} else {
	alert('当前浏览器不支持websocket');
}

//连接发生错误的回调方法
socket.onerror = function() {
	//alert("你的WebSocket链接失败");
};

//连接成功建立的回调方法
socket.onopen = function(event) {

}
	//接收到消息的回调方法
socket.onmessage = function(event) {

	//window.location.reload();//刷新网页
	var json = JSON.parse(event.data);
	// 定时弹出框(消息通知)
	var timeOrder = 10;
	setTimeout(function() {
		var createTime = json.CREATED_DT;
		var unique_id = $.gritter.add({
			title: '标题：' + json.MSG_TITLE,
			text: '内容：' + json.MSG_BODY,
			image: 'img/gritter/cloud.png',
			sticky: true,
			time: '时间：' + getDateTostr(createTime),
			class_name: 'my-sticky-class'
		});
		setTimeout(function() {
			$.gritter.remove(unique_id, {
				fade: true,
				speed: 'slow'
			});
		}, 10000);
	}, timeOrder);
	
	// 消息
	if ($('.liMsg').html() !=undefined) {
		$('.liMsg').html("");
	}
	var messageUrl = urlObj.messageNotifyList
	var jsonObj = {};
		jsonObj['FK_USER_ID'] = json.USER_ID_ARR;
		jsonObj['MSG_STATUS'] = 'NO';
		var datas = commAjaxPost(messageUrl, jsonObj);
		var length = datas.length;
		if(datas != undefined && length > 0 && datas != 'list is null') {
			var numbers = '<i class="fa fa-bell"></i><span id="appendNumS" class="badge">' + length + '</span>'
			$('#appendNum').html(numbers);
			$('#setNotificationNum').html("");
			$('#setNotificationNum').append(length + '条通知');
			// 循环获取json数据
			$.each(datas, function(index) {
				var falg = (index % 2 == 0);
				var time = datas[index]['CREATED_DT'];
				var title = datas[index]['MSG_TITLE'];
				if(title.length > 7) {
					title = title.substring(0, 6) + '...';
				}
				$('.dropdown-title').after(putHtml(datas[index]['MSG_ID'], title, getDateTostr(time), falg));
			});
		}else{
			$('#setNotificationNum').append(0 + '条通知');
		}
	timeOrder += 10;
	msgBrowser.alert(json.MSG_TITLE, json.MSG_BODY, "/img/megBroow.png"); // 桌面通知
}

参考:http://hao2013.cn/?id=32