webSocket使用(前端)

webSocket使用

一、概念

定义

WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议,解决了客户端和服务端之间的实时通信问题。浏览器和服务器只需完成一次握手,两者之间就可以创建一个持久性的TCP连接,此后服务器和客户端通过此TCP连接进行双向实时通信。举个栗子:现在需要根据用户不同的输入来获取后端不同的数据,http请求的方式就是每次用户输入我就发送一个http请求。然而websocket的解决是一次连接成功后,每次用户输入都会发送给后台,但是这个发送的数据却是一直处在已经连接的状态,并不是每次想http每一次都是一次新的连接。

优点

为了实现数据推送,一般所用的技术都是ajax轮询。轮询是在特定的时间间隔,由浏览器主动发起请求,将服务器的数据拉回来。轮询需要不断的向服务器发送请求,会占用很多带宽和服务器资源。WebSocket建立TCP连接后,服务器可以主动给客户端传递数据,能够更好的节省服务器资源和带宽,实现更实时的数据通讯。

传统的HTTP请求
webSocket使用(前端)_第1张图片
webSocket请求
webSocket使用(前端)_第2张图片

二、webSocket用法

	//申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
	var wsUrl = "ws://192.168.00.01:8888/xxx/xxxx";
  	const ws = new WebSocket(wsUrl); 

	ws.onopen = function(){
  		//当WebSocket创建成功时,触发onopen事件
   		console.log("open");
  		ws.send("hello"); //将消息发送到服务端
	}
	ws.onmessage = function(e){
  		//当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
  		console.log(e.data);
	}
	ws.onclose = function(e){
  		//当客户端收到服务端发送的关闭连接请求时,触发onclose事件
  		console.log("close");
	}
	ws.onerror = function(e){
  		//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
  		console.log(error);
	}

你可能感兴趣的:(前端,websocket,javascript)