webSocket使用（前端）

webSocket使用

一、概念

定义

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

优点

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

传统的HTTP请求

webSocket请求

二、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);
	}