WebSocket

ztj100 2025-01-19 01:59 14 浏览 0 评论

目前用户抢单操作我们已经完成，无论是非热点商品还是热点商品抢单，抢单完成后，我们应该要通知用户抢单状态，非热点商品可以直接响应抢单结果，但热点商品目前还没有实现通知响应，通知用户抢单状态用户可以通过定时向后台发出请求查询实现，但这种短连接方式效率低，会和服务器进行多次通信，这块我们可以使用长连接websocket实现。

4.1 WebSocket介绍

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

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

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

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

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

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

4.2 Websocket API

创建 WebSocket 对象：

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

WebSocket属性：

属性	描述
socket.readyState	只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket事件：

事件	事件处理程序	描述
open	socket.onopen	连接建立时触发
message	socket.onmessage	客户端接收服务端数据时触发
error	socket.onerror	通信发生错误时触发
close	socket.onclose	连接关闭时触发

WebSocket方法：

方法	描述
socket.send()	使用连接发送数据
socket.close()	关闭连接

4.3 WebSocket实例

4.3.1 客户端

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息“Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

? 我们按照上面的API实现客户端代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>websocket</title>
		<script src="jquery-3.2.1.min.js"></script>
		<script>
			var socket;
			if(typeof(WebSocket) == "undefined") {
				console.log("您的浏览器不支持WebSocket");
			}else{
				console.log("您的浏览器支持WebSocket");

				//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
				socket = new WebSocket("ws://localhost:18085/socket/zhangsan");
				//打开事件
				socket.onopen = function() {
					console.log("Socket 已打开");
				};
				//获得消息事件
				socket.onmessage = function(msg) {
					console.log(msg.data);
					//发现消息进入    调后台获取
					//getCallingList();
					$("#msg").append(msg.data+"</br>");
				};
				//关闭事件
				socket.onclose = function() {
					console.log("Socket已关闭");
				};
				//发生了错误事件
				socket.onerror = function() {
					alert("Socket发生了错误");
				}

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

				//发送消息
				function send() {
					var message = document.getElementById('text').value;
					socket.send(message);
				}
			}
		</script>
	</head>
	<body>
		<div id="msg"></div>
	</body>
</html>

4.3.2 服务端

1)引入依赖包

在seckill-order引入如下依赖：

<!--websocket-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2)websocket消息处理

? 在seckill-order服务端，我们可以创建一个类com.seckill.order.websocket.WebSocketServer，并暴露websocket地址出去，代码如下：

@Slf4j
@ServerEndpoint(value = "/socket/{userid}")
@Component
public class WebSocketServer {

    //concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private static Map<String,Session> sessions=new HashMap<String,Session>();

    //用户唯一标识符
    private String userid;

    /**
     * 连接建立成功调用的方法*/
    @OnOpen
    public void onOpen(@PathParam("userid") String userid, Session session) {
        sessions.put(userid,session);
        this.userid=userid;

        webSocketSet.add(this);     //加入set中
        try {
             sendMessage("连接成功");
        } catch (IOException e) {
            log.error("websocket IO异常");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        sessions.remove(userid);       //移除会话
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message) {
        log.info("来自客户端的消息:" + message);
        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 发生异常处理方法
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    /***
     * 群发
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException {
        for (Map.Entry<String, Session> sessionEntry : sessions.entrySet()) {
            sessionEntry.getValue().getBasicRemote().sendText(message);
        }
    }

    /***
     * 给指定用户发送消息
     * @param message
     * @param userid
     * @throws IOException
     */
    public void sendMessage(String message,String userid) throws IOException {
            sessions.get(userid).getBasicRemote().sendText(message);
    }
    
    /**
     * 群发自定义消息
     * */
    public static void sendInfo(String message) throws IOException {
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }
}

我们编写一个测试类com.seckill.order.controller.WebSocketController，用于实现给指定用户发消息，代码如下：


@RestController
@RequestMapping(value = "/ws")
public class WebSocketController {

    @Autowired
    private WebSocketServer webSocketServer;

    /***
     * 模拟给指定用户发消息
     */
    @GetMapping(value = "/send/{userid}")
    public Result sendMessage(@PathVariable(value = "userid")String userid, String msg) throws IOException {
        webSocketServer.sendMessage(msg,userid);
        return new Result(true, StatusCode.OK,"发送消息成功@");
    }
}

测试效果如下：

java websocket客户端

上一篇：解放双手!接私活必备的Java开源项目
下一篇：用JAVA和Websocket实现实时通信

WebSocket

4.1 WebSocket介绍

4.2 Websocket API

4.3 WebSocket实例

4.3.1 客户端

4.3.2 服务端

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

WebSocket

4.1 WebSocket介绍

4.2 Websocket API

4.3 WebSocket实例

4.3.1 客户端

4.3.2 服务端

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起