介绍

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

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

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

以下 API 用于创建 WebSocket 对象。

WebSocket协议

WebSocket并不是全新的协议,而是利用了HTTP协议来建立连接。我们来看看WebSocket连接是如何创建的。

首先,WebSocket连接必须由浏览器发起,因为请求协议是一个标准的HTTP请求,格式如下:

GET ws://localhost:3000/ws/chat HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Origin: http://localhost:3000
Sec-WebSocket-Key: client-random-string
Sec-WebSocket-Version: 13

该请求和普通的HTTP请求有几点不同:

  1. GET请求的地址不是类似/path/,而是以ws://开头的地址;
  2. 请求头Upgrade: websocketConnection: Upgrade表示这个连接将要被转换为WebSocket连接;
  3. Sec-WebSocket-Key是用于标识这个连接,并非用于加密数据;
  4. Sec-WebSocket-Version指定了WebSocket的协议版本。

随后,服务器如果接受该请求,就会返回如下响应:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: server-random-string

该响应代码101表示本次连接的 HTTP 协议即将被更改,更改后的协议就是Upgrade: websocket指定的WebSocket协议。

版本号和子协议规定了双方能理解的数据格式,以及是否支持压缩等等。如果仅使用WebSocket的API,就不需要关心这些。

现在,一个WebSocket连接就建立成功,浏览器和服务器就可以随时主动发送消息给对方。消息有两种,一种是文本,一种是二进制数据。通常,我们可以发送JSON格式的文本,这样,在浏览器处理起来就十分容易。

为什么 WebSocket 连接可以实现全双工通信而HTTP连接不行呢?实际上 HTTP 协议是建立在 TCP 协议之上的,TCP 协议本身就实现了全双工通信,但是 HTTP 协议的请求-应答机制限制了全双工通信。WebSocket 连接建立以后,其实只是简单规定了一下:接下来,咱们通信就不使用HTTP协议了,直接互相发数据吧。

安全的WebSocket连接机制和HTTPS类似。首先,浏览器用wss://xxx创建WebSocket连接时,会先通过HTTPS创建安全的连接,然后,该 HTTPS 连接升级为 WebSocket 连接,底层通信走的仍然是安全的 SSL/TLS 协议。

浏览器

很显然,要支持WebSocket通信,浏览器得支持这个协议,这样才能发出ws://xxx的请求。目前,支持WebSocket的主流浏览器如下:

  • Chrome
  • Firefox
  • IE >= 10
  • Sarafi >= 6
  • Android >= 4.4
  • iOS >= 8

SpringBoot 中 WebSocket 的使用

加入 maven 依赖

SpringBoot 2.0 之后,直接导此包即可:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>1.5.10.RELEASE</version>
</dependency>

WebSocketConfig

开启 websocket 支持,如果是使用独立的 servlet 容器(如tomcat),则不需要注入 ServerEndpointExporter

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 开启 websocket 支持<br>
 *     配置WebSocketEndpointServer
 *     如果使用独立的servlet容器,不是使用SpringBoot的内置容器
 *     不需要注入ServerEndpointExporter, 它将由容器自己提供和管理
 * @author zhangchuanqiang
 */
@Configuration
public class WebSocketConfig {
	@Bean
	public ServerEndpointExporter serverEndpointExporter() {
		return new ServerEndpointExporter();
	}
}

WebSocketServer

websocket 服务器,相当于一个ws协议的 Controller

import lombok.extern.java.Log;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @Description: WebSocketServer
 * @Author: zcq
 * @Date: 2019-06-14 14:37
 */
@Log
@Component
@ServerEndpoint("/index/{sid}")  //该注解表示该类被声明为一个webSocket终端
public class MySocket {
	/**
	 * 初始在线人数
	 */
	private static AtomicInteger online_num = new AtomicInteger(0);
	/**
	 * 线程安全的socket集合,存储在线用户实例
	 */
	private static CopyOnWriteArraySet<MySocket> webSocketSet = new CopyOnWriteArraySet<MySocket>();
	/**
	 * 当前会话
	 */
	private Session session;

	/**
	 * 接收用户id
	 */
	private String sid = "";

	/**
	 * 连接建立成功调用的方法
	 */
	@OnOpen
	public void onOpen(Session session, @PathParam("sid") String sid) {
		this.sid = sid;
		this.session = session;
		webSocketSet.add(this);
		// 在线人数+1
		addOnlineCount();
		log.info("有链接加入,当前人数为:" + getOnline_num());
		sendMessageBasic("有链接加入,当前人数为:" + getOnline_num());
	}

	/**
	 * 连接关闭调用的方法
	 */
	/**
	 * 连接关闭调用的方法
	 */
	@OnClose
	public void onClose() {
		webSocketSet.remove(this);
		subOnlineCount(); //在线数减1
		log.info("有一连接关闭!当前在线人数为" + getOnline_num());
	}

	/**
	 * 收到客户端消息后调用的方法
	 *
	 * @param message
	 * @param session
	 * @throws IOException
	 */
	@OnMessage
	public void onMessage(String message, Session session) throws IOException {
		log.info("来自客户端的消息:" + message);
		for (MySocket item : webSocketSet) {
			item.sendMessageBasic(message);
		}
	}

	/**
	 * @param session
	 * @param error
	 */
	@OnError
	public void onError(Session session, Throwable error) {
		log.info("发生错误");
		error.printStackTrace();
	}

	/**
	 * 实现服务器主动推送
	 */
	public void sendMessageBasic(String message) {
		try {
			this.session.getBasicRemote().sendText(message);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 实现服务器主动推送
	 */
	public void sendMessageAsync(String message) {
		this.session.getAsyncRemote().sendText(message);
	}

	/**
	 * 群发自定义消息
	 */
	public static void sendInfo(String message, @PathParam("sid") String sid) throws IOException {
		log.info("推送消息到窗口" + sid + ",推送内容:" + message);
		for (MySocket item : webSocketSet) {
			//这里可以设定只推送给这个sid的,为null则全部推送
			if (sid == null || "all".equals(sid)) {
				item.sendMessageBasic(message);
			} else if (item.sid.equals(sid)) {
				item.sendMessageBasic(message);
			}
		}
	}

	public static MySocket getWebSocket(String sid) {
		if (webSocketSet == null || webSocketSet.size() <= 0) {
			return null;
		}
		for (MySocket item : webSocketSet) {
			if (sid.equals(item.sid)) {
				return item;
			}
		}
		return null;
	}

	public AtomicInteger getOnline_num() {
		return MySocket.online_num;
	}

	public int subOnlineCount() {
		return MySocket.online_num.addAndGet(-1);
	}

	public int addOnlineCount() {
		return MySocket.online_num.addAndGet(1);
	}
}

推送消息

/**
 * @Description: 页面请求
 * @Author: zcq
 * @Date: 2019-06-14 14:35
 */
@GetMapping("/socket/{cid}")
public ModelAndView socket(@PathVariable String cid) {
    ModelAndView mav = new ModelAndView("/index1");
    mav.addObject("cid", cid);
    return mav;
}

/**
 * @Description: 推送数据接口
 * @Author: zcq
 * @Date: 2019-06-14 14:35
 * @param cid 为 all 时,为推送全部
 */
@ResponseBody
@RequestMapping("/socket/push/{cid}")
public Result pushToWeb(@PathVariable String cid, String message) {
    try {
        MySocket.sendInfo(message, cid);
    } catch (IOException e) {
        e.printStackTrace();
        return Result.error();
    }
    return Result.success(cid);
}

页面发起 socket 请求

协议是 ws 或者 wss,可以封装了一些 basePath 的路径类,可以replace(“http”,“ws”)来替换协议。

<html>
<head>
    <meta charset="utf-8">
    <title>My WebSocket</title>
</head>

<body>
Welcome<br/>
<input id="text" type="text"/>
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        // Websocket 使用 ws 或 wss 的统一资源标志符,类似于 HTTPS,其中 wss 表示在 TLS 之上的 Websocket。
        // onlinenum = new WebSocket("ws://localhost:8086/websocket/20");
        onlinenum = new WebSocket("http://localhost:8086/websocket/${cid}".replace("http", "ws").replace("https", "ws"));
    } else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    onlinenum.onerror = function () {
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    onlinenum.onopen = function (event) {
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    onlinenum.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    onlinenum.onclose = function () {
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
        onlinenum.close();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        onlinenum.close();
    }

    //发送消息
    function send() {
        const message = document.getElementById('text').value;
        onlinenum.send(message);
    }
</script>
</html>

问题补充: 

  • 如果希望打成WAR包,部署到TOMCAT中。需要使启动类继承:SpringBootServletInitializer,并加入方法: 
/** 
* 用于支持打包成 WAR,部署到 tomcat 中
*/ 
@Override 
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { 
    return builder.sources(AssetApplication.class); 
} 
  • 如果打成WAR包后,在TOMCAT中启动时报错:Multiple Endpoints may not be deployed to the same path 注释掉 WebSocketServer 类上的 @Component 注解。

资料

06-18 01:40