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

即时通信(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] );

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("<div class='bg-info'><label class='text-danger'>"+data.fromName+"&nbsp;"+data.date+"</label><div class='text-success'>"+data.text+"</div></div><br>");
            // 滚动条滚动到最低部
            scrollToBottom();
            }else if(data.from==0){//上线消息
            	if(data.text!="${sessionScope.username}")
            	{	
            		$("#users").append('<a href="#" οnclick="talk(this)" class="list-group-item">'+data.text+'</a>');
            		//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('连接出错!');
        };

依赖

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-websocket</artifactId>
			<version>4.0.5.RELEASE</version>
		</dependency>

后端代码

/**
 * 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();
	}

}

Logo

致力于链接即构和开发者,提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动,共建实时互动世界。

更多推荐