文档章节

websocket js版,小做封装

奔跑的草根
 奔跑的草根
发布于 2015/06/12 11:51
字数 234
阅读 2K
收藏 0
function WebSocketConnect(url) {
	var ws = null;
	/**
	 * state explanation:DISCONNECT: 4 、CLOSED: 3 、CLOSING: 2 、CONNECTING: 0 、OPEN: 1
	 */
	var msgJson = {
		evt:null,
		state:null	
	};
		
	WebSocketConnect.prototype.connect = function(callback) {
		if ('WebSocket' in window) {
			ws = new WebSocket(url);
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket(url);
		} else {
			msgJson.state = 4;
			callback(msgJson);
		}
		
	WebSocketConnect.prototype.close = function(){
		ws.close();
	};
		/**
		 * connect close
		 */
		ws.onclose = function(evt)
		{
			msgJson.evt = evt;
			msgJson.state = ws.readyState;
		    callback(msgJson);
		};
		
		/**
		 * connect error
		 */
		ws.onerror = function(evt)
		{
		    msgJson.evt = evt;
			msgJson.state = ws.readyState;
		    callback(msgJson);
		};

        /**
		 * connect open
		 */
		ws.onopen = function(evt)
		{
		   	msgJson.evt = evt;
			msgJson.state = ws.readyState;
		    callback(msgJson);
		};
		
		/**
		 * connect return message
		 */
		ws.onmessage = function(evt){
		   	msgJson.evt = evt;
			msgJson.state = ws.readyState;
		    callback(msgJson);			
		};
			
	};
}

调用实例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="./WebSocketConnect.js"></script>
</head>

<body>
<div id="label1"></div>
<div><canvas id="image123"></canvas></div>
<div><canvas id="image122"></canvas></div>
<script>
var ws = new WebSocketConnect("ws://192.168.1.239/push");
var imageObj = new Image();
var canvas=document.getElementById('image123');
var canvas1=document.getElementById('image122');
var ctx=canvas.getContext('2d');
var ctx1=canvas1.getContext('2d');
function callBack(data){
try{
    var state = data.state;
	var evt = data.evt;
	var obj = eval("("+evt.data+")");
	imageObj.src = "http://192.168.1.239/"+obj.FrameIndex+".jpg?r="+Math.random();
	imageObj.onload = function(){
	   canvas.width = imageObj.width;
	   canvas.height = imageObj.height;
	   ctx.drawImage(imageObj,0,0);
	   canvas1.width = imageObj.width;
	   canvas1.height = imageObj.height;
	   ctx1.drawImage(imageObj,0,0);
    };		
}catch(e){
}
}
ws.connect(callBack);
</script>
</body>
</html>


奔跑的草根
粉丝 5
博文 40
码字总数 26348
作品 0
郑州
私信 提问
加载中
请先登录后再评论。

暂无文章

Python3模块调用你真的会吗?不懂就来看一看?

前言 学习Python自动化框架的时候,各种文件会相互之间的调用。刚学的时候是不是很头疼!有木有!!一步步告诉你如何调用文件里的类和方法。 经常会调用同目录下的文件还有跨文件的调用   ...

osc_mhihvpgp
14分钟前
8
0
WahWah - 一个读取音频元数据的 gem

osc_tj0is418
16分钟前
10
0
光电游戏加速器免费获取方法和使用方法介绍

光电游戏加速器支持手游,端游,页游加速。支持国服,日服、美服、欧服、韩服,港台服等各大游戏区服国际网络加速,大幅提高用户的游戏体验。加速全球外服游戏,首选光电游戏加速器!玩游戏爽...

osc_ur9jjorb
17分钟前
15
0
低损耗MPO光纤连接器的IL值是多少?

随着FTTH的广泛应用,光纤通信对于数据传输容量和速度的要求越来越高,因此产生了对高密度和低损耗的光纤连接器的高需求。 前面有一篇文章我们介绍了什么是插入损耗(Insertion Loss)和回波...

osc_oz0d1seh
18分钟前
9
0
Android作为CXF客户端调用服务端。

1 加载jar 下载jar包,放在libs下 通过Project Structure添加jar依赖 成功后就会在build.gradle下添加 代码 final static String SERVICE_NS = "http://ws.service.mService.et.cn/"; ......

osc_aazzok95
20分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部