网站类网站开发教程,网页升级访问网页导航,Asp网站开发入门,做一个网站要多久前言
欢迎来到WebSocket入门案例系列的第一天#xff01;在今天的博客中#xff0c;我们将一起探索WebSocket的基础知识和使用方法。本系列将以一个简单的入门案例为基础#xff0c;带领您逐步了解WebSocket的原理和用法。 一、什么是 WebSocket ?
WebSocket是一种在Web应…前言
欢迎来到WebSocket入门案例系列的第一天在今天的博客中我们将一起探索WebSocket的基础知识和使用方法。本系列将以一个简单的入门案例为基础带领您逐步了解WebSocket的原理和用法。 一、什么是 WebSocket ?
WebSocket是一种在Web应用程序中实现实时双向通信的协议。它提供了一种持久连接允许服务器主动向客户端推送数据而不需要客户端发起请求。
传统的Web应用程序使用HTTP协议进行通信这种通信方式是基于请求-响应模式的。客户端发送请求给服务器服务器响应请求并返回相应的数据。但是这种方式存在一些限制特别是对于实时性要求较高的应用场景如聊天室、股票行情等。
WebSocket通过引入新的协议提供了一种更高效、更低延迟的通信方式。相对于HTTPWebSocket具有以下特点 双向通信WebSocket允许客户端和服务器之间进行双向通信服务器可以主动向客户端推送数据而不仅仅是响应客户端的请求。这使得实时性要求较高的应用程序能够更加高效地进行数据传输。 持久连接WebSocket在建立连接后保持持久的连接状态而不需要每次通信都重新建立连接。这消除了每次请求建立连接和断开连接的开销减少了网络流量和延迟。 低开销相对于传统的HTTP请求-响应模式WebSocket协议的数据帧头部较小有效减少了通信过程中的数据开销。此外由于使用持久连接减少了连接建立和断开的开销。 兼容性WebSocket协议基于TCP协议通过HTTP/HTTPS进行握手协商并在握手成功后升级为WebSocket连接。由于握手过程使用标准的HTTP/HTTPS协议因此WebSocket可以通过大多数防火墙和代理服务器。
WebSocket在现代Web应用程序中被广泛应用特别是对于需要实时通信和即时更新的应用场景。它为开发者提供了一种更加便捷、高效的方式来构建实时性强的Web应用程序。无论是聊天应用、实时博客评论、多人协作工具还是股票行情等都可以借助WebSocket实现更好的用户体验和数据交互。 二、为什么要使用 WebSocket
WebSocket作为一种实现实时双向通信的协议具有以下优点这也是为什么要使用WebSocket的原因 实时双向通信传统的Web应用程序都是基于HTTP协议进行请求和响应的无法实现实时双向通信。而WebSocket协议可以在客户端和服务器之间建立持久连接实现实时双向通信从而满足实时性比较强的应用场景。 低延迟与HTTP协议相比WebSocket协议的数据帧头部较小有效减少了通信过程中的数据开销。由于使用持久连接减少了连接建立和断开的开销降低了延迟提高了应用程序的响应速度和用户体验。 更好的扩展性WebSocket协议采用标准的TCP协议通过HTTP/HTTPS进行握手协商并在握手成功后升级为WebSocket连接。由于握手过程使用标准的HTTP/HTTPS协议WebSocket可以通过大多数防火墙和代理服务器。这使得应用程序更容易部署和扩展。 更低的网络流量由于WebSocket协议使用二进制帧传输数据相对于HTTP协议使用文本格式传输数据WebSocket可以减少网络流量提高应用程序的效率和性能。
总之WebSocket协议提供了一种更高效、更低延迟、更实时、更灵活的通信方式使得实时性较强的应用场景如聊天室、在线游戏、多人协作工具等更容易实现。如果您需要构建这些类型的应用程序那么WebSocket将是您不错的选择。 三、实现一个单的 Hello WebSocket
1、新建项目结构如下 2、导入依赖
!-- websocket 依赖 --dependencygroupIdjavax.websocket/groupIdartifactIdjavax.websocket-api/artifactIdversion1.1/versionscopeprovided/scope/dependency!-- 打印日志 --dependencygroupIdch.qos.logback/groupIdartifactIdlogback-classic/artifactIdversion1.3.8/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion1.18.24/version/dependency 下面是每个依赖项的作用 javax.websocket-api这是一个Java API用于支持WebSocket通信协议。WebSocket允许在客户端和服务器之间进行双向通信实时地发送消息和数据。这个依赖项提供了WebSocket的核心接口和类。 logback-classic这是一个Java日志框架用于在应用程序中记录和输出日志信息。logback-classic是logback框架的核心组件它提供了强大的日志记录功能和灵活的配置选项。 lombok这是一个Java库通过注解自动化简化了Java代码的编写。使用lombok可以减少样板代码例如自动生成getter、setter、构造函数等。它提供了一些注解来简化代码的编写和维护提高开发效率。 3、 编写 controller 类
ServerEndpoint(/connect)
Slf4j
public class WebSocketServer {/*** 打开连接的方法当有一个客户端连接服务端的时候* 这个方法就会调用一次** OnOpen注解表示连接**/OnOpenpublic void onOpen(){log.info(客户端已连接 );}/*** 客户端发送消息的方法*/OnMessagepublic void onMessage(String message,Session session) throws IOException {log.info(消息 message);// 向当前客户端发送一个消息session.getBasicRemote().sendText(message);}/*** 当客户端断开连接后调用此方法*/OnClosepublic void onClose(Session session){log.info(客户端已断开连接);}}在给出每个注解的用途之前需要说明这段代码是Java中使用WebSocket的示例代码使用了javax.websocket包提供的注解。 ServerEndpoint(/connect): 作用将Java类标记为WebSocket服务器端点。解释这个注解用于标识一个类是WebSocket的服务器端点指定了客户端连接的URL路径。在上述示例中客户端需要通过连接至/connect路径来与该服务器端点进行通信。 OnOpen: 作用定义打开连接时调用的方法。解释当有客户端连接到WebSocket服务器端点时被该注解标记的方法将会被调用。在示例中onOpen()方法在客户端连接成功后执行并打印出连接成功的消息。 OnMessage: 作用定义接收客户端消息时调用的方法。解释当WebSocket服务器端点接收到客户端发送的消息时被该注解标记的方法将会被调用。在示例中onMessage()方法接收两个参数String类型的message表示接收到的消息内容Session类型的session表示与该客户端的会话。该方法在接收到消息后会将消息原样发送回客户端。 OnClose: 作用定义客户端断开连接时调用的方法。解释当与WebSocket服务器端点建立连接的客户端断开连接时被该注解标记的方法将会被调用。在示例中onClose()方法接收一个参数Session类型的session表示与断开连接的客户端的会话。该方法在客户端断开连接后执行并打印出断开连接的消息。 这些注解是Java WebSocket API提供的一部分通过使用这些注解可以方便地定义WebSocket服务器端点的行为包括连接建立、消息接收和断开连接等操作。
这个类是一个示例的WebSocket服务器端点类用于处理客户端与服务器之间的WebSocket通信。主要功能如下 打开连接当有客户端连接到WebSocket服务器端点时会调用onOpen()方法并打印出连接成功的消息。 接收消息当WebSocket服务器端点接收到客户端发送的消息时会调用onMessage()方法并打印出接收到的消息。同时该方法会将接收到的消息原样发送回客户端。 断开连接当与WebSocket服务器端点建立连接的客户端断开连接时会调用onClose()方法并打印出断开连接的消息。 这个类是使用了Java WebSocket API提供的注解来定义WebSocket服务器端点的行为。通过这些注解可以方便地处理WebSocket的连接、消息接收和断开连接等操作。
4、编写一个 html 页面接收数据
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1websocket 客户端/h1script// 构建 websocket 的实例连接后台 server 的请求地址// websocket 在第一次请求时使用 http 协议在连接服务器告诉服务器// 接下来要使用 websocket 进行通信此时服务器将进行协议升级会在// http 的请求头中带有 upgrade:websocket 的头信息var webSocket new WebSocket(ws://localhost:8080/connect);// onopen 方法webSocket.onopen function () {// 发送一个消息webSocket.send(hello websocket);}// onmessage 方法,接受服务端发送的信息webSocket.onmessage function (event) {alert(服务器的消息 event.data);}// onclose 方法webSocket.onclose function () {alert(已断开连接);}/script/body
/html
这段代码是一个简单的WebSocket客户端示例用于与WebSocket服务器进行通信。它的作用是 创建WebSocket实例通过var webSocket new WebSocket(ws://localhost:8080/connect);语句创建了一个WebSocket实例并指定了连接的服务器地址。 连接建立当WebSocket连接成功建立时会自动触发onopen事件处理函数其中的webSocket.onopen定义了连接建立时的操作。在示例中onopen函数中发送了一条消息webSocket.send(hello websocket);到服务器。 接收消息当WebSocket客户端接收到来自服务器端的消息时会触发onmessage事件处理函数其中的webSocket.onmessage定义了接收消息时的操作。在示例中当接收到消息时会通过弹窗的方式显示服务器端发送的消息。 断开连接当WebSocket连接关闭时会触发onclose事件处理函数其中的webSocket.onclose定义了连接关闭时的操作。在示例中当连接关闭时会通过弹窗的方式提示连接已断开。 这段代码展示了一个最基本的WebSocket客户端的工作流程包括连接建立、消息发送和接收、连接断开等操作。您可以将其用于与WebSocket服务器进行实时通信实现双向数据传输的功能。根据具体需求您可以根据这个示例进行定制和扩展添加更多的业务逻辑和交互功能。 5、运行效果 我们在前端接收到了后台发送来的信息在后台我们也接受到前端发送的信息这就是一个简单的多对多的群聊了。 四、实现多人群聊
1、编写 controller ServerEndpoint(/connect)
Slf4j
public class WebSocketServer {/*** 用户列表*/private static final ListSession users new ArrayList();/*** 打开连接的方法当有一个客户端连接服务端的时候* 这个方法就会调用一次** OnOpen注解表示连接** param session 表示一个 websocket 客户端的连接会话* 每一个客户端连接就会创建一个 session 会话*/OnOpenpublic void onOpen(Session session){log.info(客户端已连接 );// 将 session 添加到用户列表中users.add(session);}/*** 客户端发送消息的方法*/OnMessagepublic void onMessage(String message,Session session) throws IOException {log.info(消息 message);// 获取当前时间String formattedTime new SimpleDateFormat(HH:mm:ss).format(new Date());// 向当前客户端发送一个消息包含发送时间String messageWithTime [ formattedTime ] message;for (Session user : users) {// 群发信息user.getBasicRemote().sendText(messageWithTime);}}/*** 当客户端断开连接后调用此方法*/OnClosepublic void onClose(Session session){log.info(客户端已断开连接);// 用户离线users.remove(session);}}解释一下每一行代码的意思
1、定义了一个静态的会话列表users用于存储所有连接到WebSocket服务端的客户端Session对象。
private static final ListSession users new ArrayList();
2、使用OnOpen注解声明一个方法该方法用于处理WebSocket客户端连接到服务器后的操作。当有一个新客户端连接到服务器时该方法会被自动调用。在该方法中首先记录下客户端连接成功的日志信息然后将客户端的Session对象保存到静态会话列表中。
OnOpen
public void onOpen(Session session){log.info(客户端已连接 );// 将 session 添加到用户列表中users.add(session);
}
3、使用OnMessage注解声明一个方法该方法用于处理WebSocket客户端发送消息的操作。当客户端向服务器发送消息时该方法会被自动调用并传入消息内容和对应的Session对象。在该方法中首先记录下客户端发送的消息内容然后获取当前时间并将时间和消息内容拼接为一个新的字符串。最后遍历所有连接到服务器的客户端即静态会话列表users并将消息广播给所有客户端。
OnMessage
public void onMessage(String message,Session session) throws IOException {log.info(消息 message);// 向当前客户端发送一个消息
// session.getBasicRemote().sendText(message);// 获取当前时间String formattedTime new SimpleDateFormat(HH:mm:ss).format(new Date());// 向当前客户端发送一个消息包含发送时间String messageWithTime [ formattedTime ] message;for (Session user : users) {// 群发信息user.getBasicRemote().sendText(messageWithTime);}}
4使用OnClose注解声明一个方法该方法用于处理WebSocket客户端断开连接的操作。当有一个客户端与服务器断开连接时该方法会被自动调用并传入断开连接的Session对象。在该方法中首先记录下客户端断开连接的日志信息然后将与断开连接的客户端对应的Session对象从静态会话列表中移除。
OnClose
public void onClose(Session session){log.info(客户端已断开连接);// 用户离线users.remove(session);
}
2、编写一个页面发送信息
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/JQuery文件.txt.js/script
/head
body
h1聊天室/h1
div idmsg/div
input idmessage typetext/
input typebutton value发送/
script//创建websocket对象let ws new WebSocket(ws://localhost:8080/connect);//接收服务端的消息ws.onmessage function(event){let message event.data;//将消息放入聊天框$(#msg).append(message br);}$(function(){$(:button).on(click,function(){//获取文本消息let msg $(#message).val();//发送消息ws.send(msg);//清空发送框$(#message).val();});})
/script/body
/html 这段代码是一个简单的HTML页面它实现了一个基本的聊天室功能。具体功能如下 在页面上显示一个标题为聊天室的大标题。有一个用于显示聊天消息的div元素它的id属性为msg。有一个input元素用于输入要发送的消息它的id属性为message。有一个input按钮用于发送消息按钮上显示发送。使用JavaScript和jQuery库来处理页面上的交互逻辑。 在脚本部分代码实现了以下功能 创建了一个WebSocket对象通过指定WebSocket服务器的URL来建立与服务器的连接。在这个例子中服务器的URL是ws://localhost:8080/connect。设置了一个事件处理程序(ws.onmessage)当接收到来自服务器的消息时会触发该事件并将消息显示在聊天框中。使用jQuery库在页面加载完成后绑定了按钮的点击事件处理程序。当按钮被点击时获取输入框中的文本消息并通过WebSocket发送给服务器。然后清空输入框以便输入下一条消息。 通过将这段代码部署到一个能够处理WebSocket协议的服务器上你可以创建一个简单的聊天室页面用户可以在其中实时地发送和接收消息。当用户在输入框中输入消息并点击发送按钮时消息将通过WebSocket发送给服务器在服务器上处理后会将消息广播给所有连接的客户端以便显示在聊天框中。这样就实现了简单的聊天室功能。 3、运行效果 五、使用局域网 IP 地址实现多人群聊
1、使用命令查看 IP 地址
win r 打开命令提示符输入 cmd 回车进入。在控制面板输出 ipconfig 回车即可查询到自己本机的 IP. 2、在 client.html 页面更改 url 只需要把 localhost 换成自己本机的 IP 地址即可。
3、运行效果
改完 url 地址后我们在浏览器就不能使用 localhost8080 去访问了。
使用 IP 地址后的访问路径为http://本机IP地址:8080/chat.html
4、什么是局域网
局域网通常用于连接位于同一地理位置的多台计算机和设备。 注意我们使用的是局域网的 IP 地址去和同学聊天的如果你们使用的是同一个网络就能够正常的访问这个路径去聊天如果不在同一网络就不能。比如教室、学校、家里的WIFI都可以。 六、总结 本次案例我们简单的讲解了实现聊天的功能。但是这只是一个开头我们要实现真正的聊天还有很多其他的功能要做比如登录登录成功后获取用户的名称。我们这次聊天是不知道用户名的只有时间和内容那么在下一章节我将要讲解如何实现登录后实现聊天。 七、gitee 案例
地址ch01 · qiuqiu/WebSocket-study - 码云 - 开源中国 (gitee.com)
