谈websocket之前,我们可以先复习一下web通信的一些概念。
推(PUSH)和拉(PULL):
推和拉是Web通信的两种方式,从定义上来说它们最主要的区别在于方向性,推是服务器主动向客户端推送消息,拉则是客户端主动发请求向服务器获取数据。
优缺点及适用场景:
1、拉模式是最常用、最成熟的一种方式,它依托了非常成熟的HTTP协议,有大量的工具类和库可以使用,请求/响应模式几乎每个程序员都知道,出现问题也容易找到相应的解决方案。
2、拉模式的限制特别少,任何一款浏览器,只要能称为浏览器的,不管多古老都支持拉,推的话像websocket是H5才支持,IE9都不支持,不仅是客户端,服务端也是有限制的,要较新的服务器才支持websocket,如Tomcat 7.0.5,WebLogic 12c ,IIS 7.0...以上的版本才“真正”支持websocket。
3、对于一般请求,拉模式占用的资源也少,比如请求个列表或者明细,服务器处理完并返回数据后,连接就断开了,简洁明了不占用连接资源。所以拉适合大多数一般的请求场景,但对于后台数据变化需要实时更新的,比如股票市场、网页游戏和聊天实等程序,拉就不适合了。
长轮询和长连接
在websocket出现之前,要实现服务器推,有两种方式,分别是长轮询和长连接。
长轮询:
轮询(Polling):客户端(浏览器)设一个定时器或死循环不停地向服务端发送查询请求,轮询的结果可能是服务端有更新就返回新的数据,也可能时服务端根本就没更新,得到一个空的信息。但是不管结果如何,客户端在下一个时间节点都会进行新的一轮请求。
短轮询: 服务端对每次请求立即返回结果。
长轮询: 长轮询是对短轮询的改善,服务端接收到请求后先查看数据,如果有更新立即返回,如果没有则把请求挂起一段时间,在这段时间内有更新就返回,如果一直没更新直到超时,服务器会主动向客户端发送本次轮询无新信息的正常响应,并断开连接,这种响应也被称之为“心跳”。再有就是如果网络故障导致轮询的意外中断,此时浏览器将收到错误信息。
由上可知,对于客户端来说,不管是长轮询还是短轮询,客户端的动作都是一样的,就是死循环不停的去请求。即一种轮询方式是否为长轮询,是根据服务端的处理方式来决定的,与客户端没有关系。
长连接:
HTTP长连接:HTTP分为长连接和短连接,它们外在表现形式的区别就是请求/响应头中是否有Connection:keep-alive。内在的区别就是TCP连接是否会被复用,即多个HTTP请求是否可以复用同一个TCP连接,可以即长连接,HTTP长连接可以节省了很多TCP连接建立和断开的消耗。比如请求一个网页,现在的网页大多不仅仅只有HTML,一般还包含了CSS、JS、图片等一系列资源,如果用短连接就需要建立几个甚至几十个TCP连接,长连接复用一个就好了,HTTP1.1以后默认都是长连接了。
实现服务器推的长连接:基于iframe流的方式,其实现原理主要是在页面隐藏一个iframe(display:none),前台设定iframe的src属性为对一个长连接的请求,服务器返回对页面函数的调用。使用iframe流方式的话浏览器会一直转圈(进度条一直没完)。这种iframe流的长连接实现服务器推的模式比较少见,与ajax长轮询稍有区别。一般ajax轮询使用XMLHttpRequest 对象发送请求,在 XMLHttpRequest 的 readystate 为 4(即数据传输结束)时使用回调函数对返回的数据进行处理。而iframe服务端返回的是JS脚本,客户端得到该脚本后就自动执行。简单的说,ajax返回的是数据而后再使用回调函数处理该数据,iframe返回的是JS脚本(脚本内可能包含数据),浏览器自动执行。
如:
iframe流实现方式:
服务端代码:
while(true){
while(!condition){//模拟阻塞,等待条件成熟,推送信息
Thread.sleep(1000);
}
num++;
PrintWriter pw = resp.getWriter();
pw.println("<script>parent.changeNumber("+num+")</script>");
pw.flush();
}
可以看到,服务端使用的是PrintWriter,等于说是将
<script>parent.changeNumber("+num+")</script>
写在浏览器里面
客户端代码:
<iframe id="polling" src="IframeCometServlet" style="display:none;"></iframe>
function changeNumber(num) { //服务端返回的字符串调用的方法
document.getElementById("number").innerHTML = num;
}
注意changeNumber(num)这个函数,与服务端返回的一致(服务端返回的为什么要带一个parent.前缀?因为是iframe接收啊,而changeNumber是定义在外面的)。
ajax长轮询方式:
服务端代码:
@RequestMapping(value = "/list")
public String list(HttpServletRequest request) {
while(condition){//等待条件成熟
//do something
break;
}
return "something";
}
$.ajax({
type: "POST",
url: "/web/goods/list",
data: JSON.stringify({data:'hello'}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
//do something
}
});
通过长轮询和长连接可以看到,它们都并不是真正的服务器推,只是变相的拉而已,这是对HTTP体系的妥协。
由此引出真正的服务器推技术:WebSocket
WebSocket
WebSocket是什么?
WebSocket和HTTP一样,是基于TCP的应用层通信协议,通过维持一条持久的连接以实现浏览器与服务器全双工通信,是随着H5一起出来的。
WebSocket和HTTP有什么关系么?
Websocket其实是一个新协议,除了最开始借用了HTTP来完成握手,后面跟HTTP基本没有关系了。
传统的HTTP要不断的建立、关闭连接(这里的关闭并不是说关闭TCP连接,而是关闭HTTP连接),而且由于HTTP是无状态性的,每次都要重新传输identity info(鉴别信息),来告诉服务端你是谁,当然,一般只是带个JSESSIONID之类的,服务端通过这个就知道你的其他信息了。WebSocket 是类似 Socket 的 TCP 长连接的通讯模式,一旦 WebSocket 连接建立后,后续数据都以帧序列的形式传输。在断掉 WebSocket 连接前,都不需要客户端和服务端重新发起连接请求,即只需一次HTTP握手,整个通讯过程是建立在一次连接/状态中,也就避免了HTTP的无状态性。
WebSocket握手
WebSocket的握手过程就是建立WebSocket连接的过程,握手是借用了HTTP的。
总体步骤大致如下:
Step 1: 建立TCP连接(这一步是一切的基础,HTTP也一样)。
Step 2: 浏览器借助一个WebSocket 客户端对象,连接类似 ws://yourdomain:port/path或wss://yourdomain:port/path的URL,WebSocket 客户端对象会自动解析并识别为要建立WebSocket 连接,从而发送HTTP Get 请求,并为请求自动添加一些供WebSocket使用的HTTP Headers字段。注意,连接头变成了ws,而不是一般的http,这是协议的意思,ws代表websocket。
Step 3: Server收到HTTP请求后,会把Step 1的TCP连接的应用层协议从HTTP转变为WebSocket。至此,HTTP部分就退出舞台了,WebSocket开始接管一切。
WebSocket握手报文(HTTP)分析:
请求
GET /chat HTTP/1.1
Host: 127.0.0.1:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: JkTukkPc4Rha+nIkbYhEkQ==
Sec-WebSocket-Version: 13
Origin: http://localhost:8080
响应
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: RD69G0BS8RPH/GbY6rBsZI75pjk=
Server:Apache-Coyote/1.1
Date:Sat, 17 Jun 2017 15:35:41 GMT
以上报文和一般的HTTP有很多不同的地方:
1、请求和响应都有Upgrade: websocket和Connection: Upgrade,这是协议转换的意思,也就是请求时告诉服务器,本次连接需要的是websocket通信协议,而不是一般的HTTP,响应也带有该响应头表示转换成功。
一般响应成功的响应头是 HTTP/1.1 200 OK、HTTP/1.1 404 NOT FOUND等,此处是HTTP/1.1 101 Switching Protocols,同样101也是HTTP的一种响应状态,表示协议转换成功。
2、Sec-WebSocket-Key: JkTukkPc4Rha+nIkbYhEkQ==和Sec-WebSocket-Accept: RD69G0BS8RPH/GbY6rBsZI75pjk=
这是websocket握手的检验,也即测试服务器是否提供websocket服务,如果提供,Sec-WebSocket-Key和Sec-WebSocket-Accept必然是有对应关系的,具体的关系如下:
Sec-WebSocket-Key拼接上258EAFA5-E914-47DA-95CA-C5AB0DC85B11(这串magic string是写在协议里面的,所有的websocket底层实现都要拼接该串)
得到对拼接结果
JkTukkPc4Rha+nIkbYhEkQ==258EAFA5-E914-47DA-95CA-C5AB0DC85B11
使用SHA-1(160数位)进行哈希操作,对哈希后的结果base64 进行编码,就可以得到结果
RD69G0BS8RPH/GbY6rBsZI75pjk=
以上操作不仅仅是服务端要做,客户端也同样做了该操作,然后将自己计算得到的结果和服务器传来的Sec-WebSocket-Accept作比较,如果相等则没问题,握手成功,如果不一致,则握手失败。
3、Origin用于防止未授权的跨域脚本攻击,服务器可以从Origin决定是否接受该WebSocket连接,所有来源于浏览器的请求都会带上该请求头。如,已授权站点www.mydomain.com,并且产生cookie,用户没关闭授权站点的时候点击另外的www.hack.com下面的链接,则该连接可以带着授权的cookie去做很多事。如果有了Origin,并且在服务端setAllowedOrigins("www.mydomain.com")则可以避免。
4、Sec-WebSocket-Version: 13 ,表明了websocket的版本,以前各厂商混战的时候什么样的版本都有,还好现在已经统一了,用13版即可。
代码以及部署
我的程序部署于tomcat7.0.5,基于Spring 4.3.7,需要使用支持websocket的IE10、Chrome和Firefox等较高级别版本的浏览器打开。
程序主要分为6个部分:2个配置xml、3个java文件、1个jsp。
前台主要用H5提供的websocket对象,它存在于顶层对象window下,凡是支持H5的浏览器都实现了该对象。
后台主要用Spring提供的websocket配置类WebSocketConfigurer、拦截器HttpSessionHandshakeInterceptor和处理器AbstractWebSocketHandler来实现。
如下:
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>WebsocketTest</display-name>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<!-- <param-value>classpath:spring-mvc.xml</param-value> --><!-- 类路径 -->
<param-value>/WEB-INF/spring-mvc.xml</param-value> <!-- 相对路径 -->
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.sc</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">
<context:component-scan base-package="com.websocket"></context:component-scan>
</beans>
WebSocketConfig.java
package com.websocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
/**
* @author wuwenhai
* @since JDK1.6
* @history 2017-6-3 wuwenhai 新建
* 配置websocket入口,允许访问的域、注册Handler、SockJs支持和拦截器
*/
@Configuration //配置类
@EnableWebSocket //声明支持websocket
public class WebSocketConfig implements WebSocketConfigurer{
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
String[] allowsOrigins={"http://localhost:8080"};
//addHandler注册和路由的功能,当客户端发起websocket连接,把/path交给对应的handler处理,而不实现具体的业务逻辑,可以理解为收集和任务分发中心。
//setAllowedOrigins(String[] domains),允许指定的域名或IP(含端口号)建立长连接,默认只有本地。如果不限时使用"*"号,如果指定了域名,则必须要以http或https开头。
//addInterceptors,顾名思义就是为handler添加拦截器,可以在调用handler前后加入自定义的逻辑代码。
registry.addHandler(ChatRoom(), "/chat.sc").setAllowedOrigins("*").addInterceptors(handshakeInterceptor());
//允许客户端使用SockJS
//SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持。
registry.addHandler(ChatRoom(), "/sockjs/chat.sc").addInterceptors(handshakeInterceptor()).withSockJS();
}
@Bean
public HandshakeInterceptor handshakeInterceptor(){
return new HandshakeInterceptor();
}
@Bean
public ChatRoom ChatRoom(){
return new ChatRoom();
}
}
package com.websocket;
import java.util.Map;
import java.util.Random;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
/**
* @author wuwenhai
* @since JDK1.6
* @history 2017-6-3 wuwenhai 新建
* 握手拦截器,在连接时做一些事情
*/
public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor{
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler handler, Map<String, Object> attributes) throws Exception {
//attributes是session里面的所有属性的map表示
attributes.put("user", getRandomNickName());
return super.beforeHandshake(request, response, handler, attributes);
}
@Override
public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
super.afterHandshake(request, response, wsHandler, ex);
}
//给每个进来的人(session)随机分配个昵称,这里没做控制,所以聊天室内的昵称可能发生重复
public String getRandomNickName(){
String[] nickNameArray={"Captain America","Deadpool","Hawkeye","Hulk","Iron Man","Spider Man","Thor","Wolverine","Black Panther","Colossus"};
Random random=new Random();
return nickNameArray[random.nextInt(10)];
}
}
ChatRoom.java
package com.websocket;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.List;
import org.apache.log4j.Logger;
import org.springframework.web.socket.BinaryMessage;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.AbstractWebSocketHandler;
/**
* @author wuwenhai
* @since JDK1.6
* @history 2017-6-3 wuwenhai 新建
* 聊天室代码
*/
public class ChatRoom extends AbstractWebSocketHandler{
public final static List<WebSocketSession> sessionList = Collections.synchronizedList(new ArrayList<WebSocketSession>());
SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
Logger logger = Logger.getLogger(this.getClass());
FileOutputStream output;
@Override
public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
System.out.println("Connection established..."+webSocketSession.getRemoteAddress());
System.out.println(webSocketSession.getAttributes().get("user")+" Login");
webSocketSession.sendMessage(new TextMessage("I'm "+(webSocketSession.getAttributes().get("user"))));
sessionList.add(webSocketSession);
}
@Override
public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus status) throws Exception {
System.out.println("Connection closed..."+webSocketSession.getRemoteAddress()+" "+status);
System.out.println(webSocketSession.getAttributes().get("user")+" Logout");
sessionList.remove(webSocketSession);
}
@Override
public void handleTextMessage(WebSocketSession websocketsession, TextMessage message)
{
String payload=message.getPayload();
String textString;
try {
if(payload.endsWith(":fileStart")){
output=new FileOutputStream(new File("D:\\images\\"+payload.split(":")[0]));
}else if(payload.endsWith(":fileFinishSingle")){
output.close();
String fileName=payload.split(":")[0];
for(WebSocketSession session:sessionList){
if(session.getId().equals(websocketsession.getId())){
textString=" I ("+format.format(new Date())+")<br>";
}else{
textString=websocketsession.getAttributes().get("user")+" ("+format.format(new Date())+")<br>";
}
TextMessage textMessage = new TextMessage(textString);
session.sendMessage(textMessage);
sendPicture(session,fileName);
}
}else if(payload.endsWith(":fileFinishWithText")){
output.close();
String fileName=payload.split(":")[0];
for(WebSocketSession session:sessionList){
sendPicture(session,fileName);
}
}else{
for(WebSocketSession session: sessionList){
if(session.getId().equals(websocketsession.getId())){
textString=" I ("+format.format(new Date())+")<br>"+payload;
}else{
textString=websocketsession.getAttributes().get("user")+" ("+format.format(new Date())+")<br>"+payload;
}
TextMessage textMessage = new TextMessage(textString);
session.sendMessage(textMessage);
}
}
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void handleBinaryMessage(WebSocketSession session, BinaryMessage message)
{
ByteBuffer buffer= message.getPayload();
try {
output.write(buffer.array());
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
if(webSocketSession.isOpen()){
webSocketSession.close();
}
System.out.println(throwable.toString());
System.out.println("WS connection error,close..."+webSocketSession.getRemoteAddress());
}
@Override
public boolean supportsPartialMessages() {
return true;
}
public void sendPicture(WebSocketSession session,String fileName){
FileInputStream input;
try {
File file=new File("D:\\images\\"+fileName);
input = new FileInputStream(file);
byte bytes[] = new byte[(int) file.length()];
input.read(bytes);
BinaryMessage byteMessage=new BinaryMessage(bytes);
session.sendMessage(byteMessage);
input.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
chatRoom.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/sockjs.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var url = "127.0.0.1:8080/websocket";
var websocket = null;
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + url + "/chat.sc");
} else {
websocket = new SockJS("http://" + url + "/sockjs/chat.sc");
}
websocket.onopen = onOpen;
websocket.onmessage = onMessage;
websocket.onerror = onError;
websocket.onclose = onClose;
function onOpen(openEvent) {
document.getElementById("plane").innerHTML = document.getElementById("plane").innerHTML+ "OPEN<br/>";
}
function onMessage(event) {
if(typeof event.data =='string'){
var element = document.createElement("p");
element.innerHTML=event.data;
document.getElementById("plane").appendChild(element);
}else{
var reader = new FileReader();
reader.οnlοad=function(eve){
if(eve.target.readyState==FileReader.DONE)
{
var img = document.createElement("img");
img.src=this.result;
document.getElementById("plane").appendChild(img);
}
};
reader.readAsDataURL(event.data);
}
}
function onError() {
}
function onClose(event) {
console.log(event.reason)
document.getElementById("plane").innerHTML = document.getElementById("plane").innerHTML+ "CLOSE<br/>";
}
function doSend() {
if (websocket.readyState == 1) { //0-CONNECTING;1-OPEN;2-CLOSING;3-CLOSED
var msg = document.getElementById("message").value;
if(msg){
websocket.send(msg);
}
sendFile(msg);
document.getElementById("message").value="";
} else {
alert("connect fail!");
}
}
function sendFile(isWithText){
var inputElement = document.getElementById("file");
var fileList = inputElement.files;
var file=fileList[0];
if(!file) return;
websocket.send(file.name+":fileStart");
var reader = new FileReader();
//以二进制形式读取文件
reader.readAsArrayBuffer(file);
//文件读取完毕后该函数响应
reader.onload = function loaded(evt) {
var blob = evt.target.result;
//发送二进制表示的文件
websocket.send(blob);
if(isWithText){
websocket.send(file.name+":fileFinishWithText");
}else{
websocket.send(file.name+":fileFinishSingle");
}
console.log("finnish");
}
inputElement.outerHTML=inputElement.outerHTML; //清空<input type="file">的值
}
function disconnect(){
if (websocket != null) {
websocket.close();
websocket = null;
}
}
function reconnect(){
if (websocket != null) {
websocket.close();
websocket = null;
}
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + url + "/chat.sc");
} else {
websocket = new SockJS("http://" + url + "/sockjs/chat.sc");
}
websocket.onopen = onOpen;
websocket.onmessage = onMessage;
websocket.onerror = onError;
websocket.onclose = onClose;
}
function clean(){
document.getElementById("plane").innerHTML = "";
}
</script>
</head>
<body>
<div>
<button id="disconnect" οnclick="disconnect()">disconnect</button>
<button id="send" οnclick="doSend()">send</button>
<button id="reconnect" οnclick="reconnect()">reconnect</button>
<button id="clean" οnclick="clean()">clean</button>
<!-- <br>
<input type="button" value="sendFile" οnclick="sendFile()"/> -->
<input type="file" id="file" />
</div>
<div>
<input id="message" type="text" style="width: 350px"></input>
</div>
<div id="plane"></div>
</body>
</html>
部署成功后,访问http://localhost:8080/websocket/view/chatRoom.jsp 可以得到效果如下图所示,分别是聊天室内3个人的聊天页面:
到此介绍完websocket了,有两篇我感觉写得比较好的文章介绍给大家:
http://www.jianshu.com/p/867274a5e054
https://www.zhihu.com/question/20215561
以上代码,可以在我的github上找到,如果有帮助,帮忙点个star哦
https://github.com/a4227139/Websocket-ChatRoom