文档章节

websocket js版,小做封装

奔跑的草根
 奔跑的草根
发布于 2015/06/12 11:51
字数 234
阅读 54
收藏 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
为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通

为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 广而告之 使用socket.io作为跨浏览器平台的实时推送首选,经测试在各个主流浏览器上测试都确实具有良好的下实时...

james_laughing
2014/12/17
0
2
使用Edge.js,在JavaScript中调用C# .Net

Edge.js能够让开发者在JavaScript中调用C#的接口,提高应用的扩展能力。这里介绍如何调用C#接口获取图片数据,并通过Node.js搭建的WebSocket server发送到Web客户端。 参考:How to Use Edge...

yushulx
2014/10/28
0
0
websocket基础---stomp英文文档STOMP Over WebSocket

STOMP Over WebSocket What is STOMP? STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can ......

spinachgit
05/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
183
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部