文档章节

websocket js版,小做封装

奔跑的草根
 奔跑的草根
发布于 2015/06/12 11:51
字数 234
阅读 106
收藏 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>


© 著作权归作者所有

共有 人打赏支持
奔跑的草根
粉丝 4
博文 40
码字总数 26348
作品 0
郑州
私信 提问
用jetty搭建websocket服务并与ie78兼容的方法

jetty8中已经自带有websocket功能,所以我们可以很方便搭建一个自己的websocket服务。 源程序:http://sdrv.ms/N5BuKw 启动类:org.noahx.websocket.WebSocketServer 访问地址:http://127....

NoahX
2012/08/09
0
6
高效简易websocket服务开发包beetle

 websocket的主要是为了解决在web上应用长连接进行灵活的通讯应用而产生,但websocket本身只是一个基础协议,对于消息上还不算灵活,毕竟websocket只提供文本和二进制流这种基础数据格式.在...

泥水佬
2015/07/10
0
0
websocket-heartbeat-js心跳检测库正式发布

前言: 两年前写了一篇websocket心跳的博客——初探和实现websocket心跳重连。 阅读量一直比较大,加上最近考虑写一个自己的npm包,因此就完成了一个websocket心跳的检测库。在这里先感谢几个...

10/15
0
0
spring4 websocketjs默认的js库

使用spring4的websocket,配置了后,这个配置并不起效,当浏览器版不支持websocket的时候,使用的js还是spring4里面默认的路径

淡淡流逝
2015/10/19
249
0
spring4 websocketjs默认的js库

使用spring4的websocket,配置了后,这个配置并不起效,当浏览器版不支持websocket的时候,使用的js还是spring4里面默认的路径,怎么才能让设置的生效

淡淡流逝
2015/12/19
377
0

没有更多内容

加载失败,请刷新页面

加载更多

sed修改行基础使用

修改(change)命令允许修改数据流中整行文本的内容,这个和删除和替换的工作机制差不多吧。 还是使用下面的测试数据: 然后我们就替换掉第三行吧,sed '2c/hello xin ,you are pretty boy' tes...

woshixin
7分钟前
0
0
微信支付申请

确认相关信息后点击确认提交 提交成功后提示相关信息 签署相关协议 其他电话和打款验证成功后,恭喜您成功通过微信支付商户资料审核!(注意查看邮箱文件) 登陆微信公众平台微信支付查看 其...

Code辉
11分钟前
0
0
基于Sentry实现数据访问权限控制

Sentry初识 Sentry是适用于Hadoop生态环境、基于角色的授权管理系统,可以模块化集成到HDFS、Hive、Impala。它是一个策略引擎,运行定义授权规则,以校验用户对数据模型的访问请求。 授权粒度...

hblt-j
22分钟前
1
0
executor 和task 优先于线程(68)

java.util.concurrent 包里有一个Executor 框架 基于接口的任务执行工具 只需要一行代码 提交一个runnable 方法 优雅的终止(必须做到,不然虚拟机可能不会退出) 对于负载不重的服务 Execut...

Java搬砖工程师
54分钟前
1
0
一条SQL查询语句是如何执行的

123

writeademo
56分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部