客户端支持WebSocket的浏览器中,在创建socket后,可以通过onopen、onmessage、onclose和onerror四个事件对socket进行响应。WebSocket的所有操作都是采用事件的方式触发的,这样不会阻塞UI,是的UI有更快的响应时间,有更好的用户体验。
浏览器通过Javascript向服务器发出建立WebSocket连接的请求,连接建立后,客户端和服务器就可以通过TCP连接直接交换数据。当你获取WebSocket连接后,可以通多send()方法向服务器发送数据,可以通过onmessage事件接收服务器返回的数据。
//申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
var ws = new WebSocket("ws://localhost:8080");
//当WebSocket创建成功时,触发onopen事件
ws.onopen = function () {
console.log("open");
ws.send("hello"); //将消息发送到服务端
}
//当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
ws.onmessage = function (e) {
console.log(e.data);
}
//当客户端收到服务端发送的关闭连接请求时,触发onclose事件
ws.onclose = function(e){
console.log("close");
}
//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function(e){
console.log(error);
}