webSocket前后端连接实例

最新推荐文章于 2024-08-28 14:03:15 发布

MarxPe

最新推荐文章于 2024-08-28 14:03:15 发布

阅读量9.6k

点赞数 6

分类专栏：笔记

本文链接：https://blog.csdn.net/u012897606/article/details/105841732

版权

笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

简介

传统的网络通信一般使用的是HTTP协议，它是一种无状态的、无连接的、单向的应用层协议。通信请求只能由客户端发起，服务端对请求做出应答处理。它是单向的，也就导致无法实现服务器主动向客户端发起消息。同时，它也是一次性的，即每个请求响应后，连接就结束了。要想继续与服务端对话，就需要重新发送请求。
但有些时候，我们是需要前后端保持长久的、双向的联系，前端实时获取后端推送过来的信息，而不是自己去发送一个个的请求来获取。
这时，webSocket就应运而生了。
webSocket：实现了浏览器与服务器全双工通信(full-duplex)。只需要建立一次连接，就可以一直保持连接状态，并且前后端可以互相通信，不再是单向的了。

简单使用

webSocket使用起来其实很简单，下面简单介绍一下：

前端：调用websocket方法进行连接和各种状态下的通信：
new WebSocket("ws://localhost:/websocket");
其中 /websocket 是后台定义的
其余的各种方法，看下面例子即可
后端：定义一个websocket服务端
@ServerEndpoint("/websocket") public class WebSocketTest {}
@ServerEndpoint 注解是一个类层次的注解，将目前的类定义成一个websocket服务器端,
注解的值即为访问的URL地址，即前端 ws://localhost:/websocket 中的 /websocket
其余对应的方法，看下面例子即可

【前端】主要js

var websocket = null;
//判断当前浏览器是否支持WebSocket，是则创建WebSocket
if ('WebSocket' in window) {
	websocket = new WebSocket("ws://localhost:[port]/websocket");
}else {
	alert('当前浏览器 Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function () {
	console.log("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function () {
	console.log("WebSocket连接成功");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
	console.log(event.data);
}
//连接关闭的回调方法
websocket.onclose = function () {
	console.log("WebSocket连接关闭");
}

//关闭WebSocket连接
function closeWebSocket() {
	websocket.close();
}
//发送消息
function send() {
	var message = document.getElementById('text').value;
	websocket.send(message);
}

//如果websocket连接还没断开就关闭了窗口，后台server端会抛异常。
//所以增加监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接
window.onbeforeunload = function () {
	closeWebSocket();
}

【后端】主要代码：

/**
* @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
* 注解的值[/websocket]即为客户端webSocket连接的url地址
*/
@ServerEndpoint("/websocket")
public class WebSocketTest {
	
	/**
	* 连接建立成功调用的方法
	* @param session 客户端的连接会话
	*/
	@OnOpen
	public void onOpen(Session session){
		System.out.println("连接开始!");
	}
	
	/**
	* 连接关闭调用的方法
	*/
	@OnClose
	public void onClose(){
		System.out.println("连接关闭！");
	}
	
	/**
	* 收到客户端消息后调用的方法
	* @param message 客户端发送过来的消息
	* @param session 可选的参数
	*/
	@OnMessage
	public void onMessage(String message, Session session) {
		System.out.println("来自客户端的消息:" + message);
		//发送消息回去
		session.getBasicRemote().sendText(message);
		//session.getAsyncRemote().sendText(message);
	}
	
	/**
	* 发生错误时调用
	* @param session
	* @param error
	*/
	@OnError
	public void onError(Session session, Throwable error){
		System.out.println("发生错误");
		error.printStackTrace();
	}
	
}