即时通讯WebSocket

即时通讯的业务场景和需求

即时通信（Instant Messaging，简称IM）是一个允许两人或多人使用网络实时的传递文字消息、文件、语音与视频交流。 即时通讯技术应用于需要实时收发消息的业务场景。

例如：抖音，直播， 社交App，小黄车app

短连接

客户端和服务器每进行一次通讯，就建立一次连接，通讯结束就中断连接。

HTTP是一个简单的请求-响应协议，它通常运行在TCP之上。HTTP/1.0使用的TCP默认是短连接。
HTTP是一个简单的请求-响应协议，它通常运行在TCP之上。HTTP/1.0使用的TCP默认是短连接。HTTP是一个协议， 1.0底层用的是短链接

长连接

是指在建立连接后可以连续多次发送数据，直到双方断开连接。

HTTP从1.1版本起，底层的TCP使用的长连接。
使用长连接的HTTP协议，会在响应头加入代码： Connection:keep-alive

长连接和短链接区别

短连接：创建连接 -> 传输数据 -> 关闭连接
长连接：创建连接 -> 传输数据 -> 保持连接 -> 传输数据 ->…… -> 关闭连接

使用场景
短链接：并发量大的，数据交互不频繁的
长连接：数据交互频繁，点对点通讯

通讯方式
短链接：我跟你发信息，必须等到你回复我或者等了一会等不下去了，就结束通讯了
长连接：我跟你发信息，一直保持通讯，在保持通讯这个时段，我去做其他事情的当中你回复我了，我能立刻你回复了我什么，然后可以回应或者不回应，继续做事

WebSocket协议

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

何谓全双工：全双工（Full Duplex）是通讯传输的一个术语。双方在通信时允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合。全双工指可以同时进行信号的双向传输。指A→B的同时B→A，就像是双向车道。

单工：就就像是汽车的单行道，是在只允许甲方向乙方传送信息，而乙方不能向甲方传送 。

在推送功能的实现技术上，相比使用Ajax 定时轮询的方式(setInterval)，WebSocket 更节省服务器资源和带宽。
在 WebSocket中，浏览器和服务器只需要完成一次握手，就可以创建持久性的连接，并进行双向数据传输。

websocket常用事件方法

var Socket = new WebSocket(url, [protocol] );
1

WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

WebSocket 方法

案例代码

// 指定websocket路径
        var websocket;
        if ('WebSocket' in window) {
			websocket = new WebSocket("ws://localhost:8080/Spring-websocket/ws?uid="+${sessionScope.uid});
		} else if ('MozWebSocket' in window) {
			websocket = new MozWebSocket("ws://localhost:8080/Spring-websocket/ws"+${sessionScope.uid});
		} else {
			websocket = new SockJS("http://localhost:8080/Spring-websocket/ws/sockjs"+${sessionScope.uid});
		}
        //var websocket = new WebSocket('ws://localhost:8080/Spring-websocket/ws');
        websocket.onmessage = function(event) {
       	 var data=JSON.parse(event.data);
       	 	if(data.from>0||data.from==-1){//用户或者群消息
            // 接收服务端的实时消息并添加到HTML页面中
            $("#log-container").append("
"+data.fromName+" "+data.date+"
"+data.text+"

");
            // 滚动条滚动到最低部
            scrollToBottom();
            }else if(data.from==0){//上线消息
            	if(data.text!="${sessionScope.username}")
            	{	
            		$("#users").append(''+data.text+'');
            		//alert(data.text+"上线了");
            	}
            }else if(data.from==-2){//下线消息
            	if(data.text!="${sessionScope.username}")
            	{	
            		$("#users > a").remove(":contains('"+data.text+"')");
            		//alert(data.text+"下线了");
            	}
            }
        };
        websocket.onopen = function(event) {
            debugger
            //alert('连接成功！');
        };
        websocket.onclose = function(event) {
            debugger
            //alert('连接关闭！');
        };
        websocket.onerror = function(event) {
            //alert('连接出错！');
        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

依赖

		<dependency>
			<groupId>org.springframeworkgroupId>
			<artifactId>spring-websocketartifactId>
			<version>4.0.5.RELEASEversion>
		dependency>
1
2
3
4
5

后端代码

/**
 * WebScoket配置处理器
 */
@Component
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {

	@Resource
	MyWebSocketHandler handler;

	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(handler, "/ws").addInterceptors(new HandShake());

		registry.addHandler(handler, "/ws/sockjs").addInterceptors(new HandShake()).withSockJS();
	}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18