websocket-优快云博客

本文链接：https://blog.youkuaiyun.com/Forbidden_City/article/details/140577840

WebSocket介绍

什么是WebSocket

HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，浏览器和服务器之间的数据交换变得更加简单。
在这里插入图片描述

WebSocket VS HTTP

它们的不同点：
1）HTTP的协议标识符是http，WebSocket的是ws；
2）HTTP请求只能由客户端发起，服务器无法主动向客户端推送消息，而WebSocket可以；
3）HTTP请求有同源限制，不同源之间通信需要跨域，而WebSocket没有同源限制。
它们的相同点：
1）都是应用层的通信协议；
2）默认端口一样，都是80或443；
3）都可以用于浏览器和服务器间的通信；
4）都基于TCP协议。

（都是基于TCP协议，http只能从客户端发送请求，websocket可以进行双向通信，任意一端（客户端，服务端）可以通过建立的连接将信息推到另一端）

WebSocket优点

1）支持双向通信，实时性更强；
2）更好的二进制支持；
3）较少的控制开销：
连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部；
4）支持扩展：
ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议（比如支持自定义压缩算法等）。

使用场景

业务场景	场景概述
弹幕	终端用户A在自己的手机端发送了一条弹幕信息，但是您也需要在客户A的手机端上将其他N个客户端发送的弹幕信息一并展示。需要通过WebSocket协议将其他客户端发送的弹幕信息从服务端全部推送至客户A的手机端，从而使客户A可以同时看到自己发送的弹幕和其他用户发送的弹幕。
在线教育	老师进行一对多的在线授课，在客户端内编写的笔记、大纲等信息，需要实时推送至多个学生的客户端，需要通过WebSocket协议来完成。
股票等金融产品实时报价	股票黄金等价格变化迅速，变化后，可以通过WebSocket协议将变化后的价格实时推送至世界各地的客户端，方便交易员迅速做出交易判断。
体育实况更新	由于全世界体育爱好者数量众多，因此比赛实况成为其最为关心的热点。这类新闻中最好的体验就是利用WebSocket达到实时的更新。
视频会议和聊天	尽管视频会议并不能代替和真人相见，但是应用场景众多。WebSocket可以帮助两端或多端接入会议的用户实时传递信息。
基于位置的应用	越来越多的开发者借用移动设备的GPS功能来实现基于位置的网络应用。如果您一直记录终端用户的位置（例如：您的 App记录用户的运动轨迹），就可以收集到更加细致化的数据。

WebSocket快速开始

一个简单的WebSocket聊天Demo

模拟两个web客户端实现聊天功能

客户端代码

client.html：

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		.message{
     
			width: 60%;
			margin: 0 10px;
			display: inline-block;
			text-align: center;
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			border-radius: 5px;
			border: 1px solid #B3D33F;
		}
		.form{
     
			width:100%;
			position: fixed;
			bottom: 300px;
			left: 0;
		}
		.connect{
     
			height: 40px;
			vertical-align: top;
			/* padding: 0; */
			width: 80px;
			font-size: 20px;
			border-radius: 5px;
			border: none;
			background: #B3D33F;
			color: #fff;
		}
	</style>
</head>
<body>
	<ul id="content"></ul>
	<form class="form">
		<input type="text" placeholder="请输入发送的消息" class="message" id="message"/>
		<input type="button" value="发送" id="send" class="connect"/>
		<input type="button" value="连接" id="connect" class="connect"/>
	</form>
	<script></script>
</body>
</html>

客户端js代码：

var oUl=document.getElementById('content');
	var oConnect=document.getElementById('connect');
	var oSend=document.getElementById('send');
	var oInput=document.getElementById('message');
	var ws=null;
	oConnect.onclick=function(){
   
	ws=new WebSocket('ws://localhost:5000');
	ws.onopen=function(){
   
		oUl.innerHTML+="<li>客户端已连接</li>";
	}
	ws.onmessage=function(evt){
   
		oUl.innerHTML+="<li>"+evt.data+"</li>";
	}
	ws.onclose=function(){
   
		oUl.innerHTML+="<li>客户端已断开连接</li>";
	};
	ws.onerror=function(evt){
   
		oUl.innerHTML+="<li>"+evt.data+"</li>";
	};
};
oSend.onclick=function(){
   
	if(ws){
   
		ws.send(oInput.value);
	}
}

这里使用的是w3c规范中关于HTML5 websocket API的原生API，这些api很简单，就是利用new WebSocket创建一个指定连接服务端地址的ws实例，然后为该实例注册onopen(连接服务端),onmessage(接受服务端数据)，onclose(关闭连接)以及ws.send(建立连接后)发送请求。

WebSocket客户端的 API

WebSocket 构造函数

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例：

var ws = new WebSocket('ws://localhost:8080');

执行上面语句之后，客户端就会与服务器进行连接。

webSocket.readyState

readyState属性返回实例对象的当前状态，共有四种：

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

switch (ws.readyState) {
   
	case WebSocket.CONNECTING:
		// do something
		break;
	case WebSocket.OPEN:
		// do something
		break;
	case WebSocket.CLOSING:
		// do something
		break;
	case WebSocket.CLOSED:
		// do something
		break;
	default:
		// this never happens
		break;
}

webSocket.onopen
实例对象的onopen属性，用于指定连接成功后的回调函数：

ws.onopen = function () {
   
	ws.send('Hello Server!');
}

如果要指定多个回调函数，可以使用addEventListener方法：

ws.addEventListener('open', function (event) {
   
	ws.send('Hello Server!');
});

webSocket.onclose
实例对象的onclose属性，用于指定连接关闭后的回调函数：

ws.onclose = function(event) {
   
	var code = event.code;
	var reason = event.reason;
	var wasClean = event.wasClean;
	// handle close event
};
ws.addEventListener("close", function(event) {
   
	var code = event.code;
	var reason = event.reason;
	var wasClean = event.wasClean;
	// handle close event
});

webSocket.onmessage
实例对象的onmessage属性，用于指定收到服务器数据后的回调函数：

ws.onmessage = function(event) {
   
	var data = event.data;
	// 处理数据
};

ws.addEventListener("message", function(event) {
   
	var data = event.data;
	// 处理数据
});

注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）：

ws.onmessage = function(event){
   
	if(typeof event.data === String){
   
		console.log("Received data string");
	}
	if(event.data instanceof ArrayBuffer){
   
		var buffer = event.data;
		console.log("Received arraybuffer");
	}
}