websocket那几个监听的事件

1、WebSocket 是 HTML5 中提出的新的网络协议标准，其包含几个特点：

建立于 TCP 协议之上的应用层；

一旦建立连接（直到断开或者出错），服务端与客户端握手后则一直保持连接状态，是持久化连接；

服务端可通过实时通道主动下发消息；

数据接收的「实时性（相对）」与「时序性」；

2、监听事件：

WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服   务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。

WebSocket对象有三个事件：open、close和message对应有三个事件监听器                       onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监     听错误。

例如：url = "ws://localhost:8080/echo"

w = new WebSocket(url)

w = new WebSocket(url, ["proto1", "proto2"])

onopen = function(e) {  

   //确定服务器选择的协议  

   log(e.target.protocol) 

}

//以下是监听事件：

w.onopen = function() {

log("open") 

 

w.send("send message") 

}

w.onmessage = function(e) {

log(e.data) 

}

w.onclose = function(e) {

log("closed") 

}

w.onerror = function(e) {

log("error") 

}

实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上).而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理.

实现逻辑是这样:

1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,d起做什么.一般鼠标事件都是判断d起的位置

2,判断有效坐标,在事件中判断坐标位置是否在图片位置,也就是图片在canvas的位置.

ex:

//some code...

canvas.width=400

canvas.height=400

var context2d = canvas.getContext("2d")

var img =new Image()

img.src="xxx/xxx.png"

img.onload=function(){

context2d.drawImage(img,X,Y,WIDTH,HEIGTH)

//X=0,Y=0,W=50,H=50

canvas.addEventListener("mouseup", keyUp, false)

}

function keyUp(evt){

Event_UpX = evt.offsetX

Event_UpY = evt.offsetY

if(Event_UpX>=绘制坐标X&&Event_UpX<=图片宽度){

if(Event_UpY>=绘制坐标Y&&Event_UpY<=图片高度){

//do something

}

}

}

---