javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js中的WebSocket

js中的WebSocket使用及说明

作者:Lemon今天学习了吗

这篇文章主要介绍了js中的WebSocket使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、WebSocket定义

html5提供的单个TCP连接上进行全双工通信的协议。

WebSocket允许服务端主动向客户端推送数据

在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输

二、WebSocket特点

在实现数据推送时,多数都是ajax轮询(在特定的时间间隔,由浏览器主动发起请求,会占用很多带宽和服务器资源)。

而WebSocket建立TCP连接后,服务器可以主动给客户端传递数据,能够更好的节省服务器资源和带宽,实现更实时的数据通讯。

因为WebSockets只能通过连接发送纯文本数据和二进制数据,所以对于复杂的数据结构,在通过连接发送之前,必须进行JSON.stringify()序列化。

协议标识符是ws(加密则为wss),服务器网址就是 URL。

如“ws://localhost:8080"。

三、WebSocket用法

WebSocket的所有操作都是采用事件的方式触发的,这样不会阻塞UI,使得UI有更快的响应时间和更好的用户体验。

浏览器通过Javascript向服务器发出建立WebSocket连接的请求,连接建立后,客户端和服务器就可以通过TCP连接直接交换数据。

当获取WebSocket连接后,可以通过send()方法向服务器发送数据,可以通过onmessage事件接收服务器返回的数据。

实例

var ws = new WebSocket(path [,protocols]);

path:要连接的 URL,这应该是 WebSocket 服务器将响应的 URL。

protocols(可选):一个协议字符串或者一个包含协议字符串的数组。

属性

ws.readyState
ws.bufferedAmount

...

方法

ws.send()

ws.close()

事件

ws.onopen

ws.onmessage

ws.close

ws.onerror

//创建一个webSocket实例,执行后,客户端就会与服务端连接
var ws = new WebSocket("ws://localhost:8080"); 
 
//当WebSocket创建成功时,触发onopen事件
ws.onopen = function(){
    console.log("open");
    // 复杂的数据结构,在通过连接发送之前,必须进行序列化。 
    const json = JSON.stringify({
		type: 'keepalive',
		id: ''
	});
   ws.send(json); //将消息发送到服务端
}
 
//当客户端收到服务端发来的消息时,触发onmessage事件
ws.onmessage = function(e){
    //e.data 的数据格式也是字符串,手动解析这些数据才能得到其他格式的数据。
    const _data = JSON.parse(e.data); 
  console.log(e.data,_data);
}
 
//当客户端收到服务端发送的关闭连接请求时,触发onclose事件
ws.onclose = function(e){
  console.log("close");
}
 
//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function(e){
  console.log(error);
}

四、Http与WebSocket的区别

http协议是短链接,因为请求之后,都会关闭连接,下次重新请求数据,需要再次打开连接。

WebSocket协议是一种长连接,只需要通过一次请求来初始化链接,然后所有的请求和响应都是通过这个TCP链接进行通信。

五、WebSocket和Socket的区别

Socket是应用层与TCP/IP协议通信的中间软件抽象层,它是一组接口。

而WebSocket则不同,它是一个完整的应用层协议,包含一套标准的API。

六、利用socket.io实现简易聊天室思路

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文