前端☀️每日

一言任何一个你不喜欢而又离不开的地方任何一种你不喜欢而又无法摆脱的生活都是监狱

一、前言

我们在日常开发中是否会思考为什么一个系统在没有任何请求的前提下会接受到服务器端发来的消息聊天软件是为什么可以做到消息的发送和实时接收网络游戏中为什么我可以在我们屏幕中看到其它玩家的操作今天这篇关于WebSocket的文章完全可以解决你的疑问。

废话不多说让我们开始吧

二、Websocket介绍

WebSocket是一种全双工通信协议它能够在单个TCP连接上实现

无需频繁地发起连接和关闭连接。

通过WebSocket我们可以在浏览器和服务器之间建立稳定的连接实时传递数据实现即时聊天、实时更新、多人在线游戏等功能。

2.2

WebSocket允许客户端和服务器之间进行双向通信无需等待对方的请求或响应。

持久连接

WebSocket连接一旦建立会持续保持连接状态避免了重复的连接和断开过程减少了网络开销。

3低延迟

由于连接一直保持打开状态数据的传输可以更快地实现从而实现低延迟的实时通信。

与传统的HTTP请求相比WebSocket传输的数据头部信息较少减少了数据传输量提高了效率。

协议支持

WebSocket是一种独立于应用层协议的协议可以在多种编程语言和平台上使用。

2.3

客户端发送请求服务器返回响应然后连接断开。

这种方式适合传输静态内容或需要客户端不断向服务器发起请求的情况。

Websocket是全双工的通信协议WebSocket允许在客户端和服务器之间建立持久性的连接双方可以随时相互发送数据。

这种方式适合实时性要求较高、交互复杂的应用如实时聊天、在线游戏等。

2连接状态区别

Http是短连接web端请求服务器端建立连接服务器端返回后连接断开。

Websocket是长连接连接一次就会一直保持连接。

三、实现方式

服务器端Service的方式来展示WebSocket的实现方式。

客户端使用JS实现服务器端使用Java

3.1

charsetutf-8titleWebsocket/title/headbodyinput

idmessageInput

WebSocket(ws://192.168.31.136:5050/websocket/1);websocket.onmessage

event

处理服务器发送过来的消息console.log(Received

message:,

data);};sendButton.addEventListener(click,

{const

message};//发送消息到服务端websocket.send(JSON.stringify(messageData));messageInput.value

清空输入框});window.addEventListener(beforeunload,

{//

!--SpringBoot依赖--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactIdversion2.1.2.RELEASE/version/dependency!--Websocket依赖--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactIdversion2.3.7.RELEASE/version

EnableWebSocket

{SpringApplication.run(ApplicationRun.class,args);}

}这里注意一定要添加上EnableWebSocket表示开启Websocket。

application.ymal配置文件

com.hjd.websocket.websocketserver;import

import

org.springframework.stereotype.Component;import

javax.websocket.*;

javax.websocket.server.PathParam;

import

javax.websocket.server.ServerEndpoint;

import

java.util.concurrent.ConcurrentHashMap;Component

ServerEndpoint(/websocket/{clientId})

Slf4j

webSocketOpen(PathParam(clientId)

String

或者是客户端调用了关闭链接的方法。

*/OnClosepublic

void

{log.info(客户端:{}发来了消息:{},clientId,message);}/***

void

要想服务器端推送消息给客户端有个问题是服务器端如何知道你要发送给那个客户端呢所以就必须存储下已经连接到服务器端的客户端消息。

需要改动下代码

Websocket服务端省略了onError和onClose方法它们不变:

Component

ServerEndpoint(/websocket/{clientId})

Slf4j

{this.saveClient(session,clientId);log.info(客户端:{}连接上了服务端,

void

{log.info(客户端:{}发来了消息:{},clientId,message);//给指定的客户端推送消息if(toClientId

null){webSocketSet.get(toClientId).sendMessage(message);}}/***

保存客户端*

(webSocketSet.containsKey(clientId))

{webSocketSet.remove(clientId);webSocketSet.put(clientId,

this);}

{this.session.getBasicRemote().sendText(message);}

package

com.hjd.websocket.controller;import

com.hjd.websocket.websocketserver.MsgWebSocketServer;

import

org.springframework.beans.factory.annotation.Autowired;

import

org.springframework.web.bind.annotation.*;import

javax.websocket.server.PathParam;RequestMapping(/send)

RestController

Exception*/GetMapping(/sendMsgToClient/{msg})public

void

{msgWebSocketServer.onMessage(null,msg,toClient);}}

调用推送消息接口

http://localhost:5050/send/sendMsgToClient?msg%22%E5%93%88%E5%93%88%E5%93%88%E5%93%88%22toClient1客户端控制台

3.5

这个也非常简单我们已经把连接上的客户端全部存储到了ConcurrentHashMap集合中(之所以使用ConcurrentHashMap是因为它线程安全可以保证再多个客户端链接时存储的信息不会错乱)只需要遍历下集合给每个客户端都发送消息即可实现广播的效果了。

四、应用

基于上面的讲解我们在客户端发送消息时指定下接受消息的toClient就搞定了。

4.2

这个思路也比较简单不过得分房间比如一个房间内有四个玩家其中一个玩家操作了游戏中的对象只需要将对应的操作指令发送给服务器端然后广播给房间内的所有玩家那么就可以实现游戏世界的状态同步让玩家能够看到其他玩家的操作了。

4.3

我想使用Websocket实现一个多人在线游戏作为示例更加充分的说明Websocket的应用。

等我吃60个汉堡再说吧~