WebSocket实例—初级聊天室(来自Tomcat8的examples)

程序跑起来

在Tomcat的Webapps中自带有Tomcat的很多小例子。本文选取其中的关于WebSocket的例子,来进行学习。首先先将程序跑起来。
开发环境eclipse+tomcat8
1、新建项目名称为examples(自取名字也可以,但是在程序中也要更改,这里避免麻烦,就不该了)
2、将websocket文件夹拷贝到WebContent目录下
3、将WEB-INF/classes文件夹中websocket和util包拷贝到src目录下
4、导入必要的包,我缺的是juli.jar包,右键-》build path-》configure build path-》add External JARs,juli包在tomcat的bin目录下。

配置Tomcat步骤省略了,运行项目,在浏览器中输入
http://localhost:8080/examples/websocket/chat.xhtml
即能实现浏览器之间的对话。
运行如下所示:(注意我这里面改变了项目名,程序中也做了相应的改变)

这里写图片描述

程序分析

这样就实现了初级的聊天程序,我们再来分析一下源代码。

我们发现该段代码是基于注解的实现。注解是元数据,对代码进行说明。但是不影响代码的逻辑功能。我们先看一下这段代码大概实现了一个什么样的逻辑。
1、定义一下基本的变量信息,表示在线客户端的信息。定义了一个Set来保存会话连接。
2、当连接打开时,保存连接,并广播连接加入信息。
3、当服务器端接收到客户端的信息时,将信息进行广播。
4、当连接关闭时,广播连接关闭信息
5、对错误的处理。
然后,我们发现最核心的功能就是,
建立连接-》将连接保存在set中-》广播信息-》连接断开-》将连接从set中移除

服务器端

@ServerEndpoint(value = "/websocket/chat")
public class ChatAnnotation {
   

    private static final Log log = LogFactory.getLog(ChatAnnotation.class);
    private static final String GUEST_PREFIX = "Guest";
    private static final AtomicInteger connectionIds = new AtomicInteger(0);
    private static final Set<ChatAnnotation> connections =
            new CopyOnWriteArraySet<>();
    private final String nickname;
    private Session session;
    
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebSocket客户端和服务端实例源码 WebSocket ws实例 HTML5 用java实现的服务端 Websocket与服务器的正常通信 众所周知,Web 应用的交互过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现,这种机制对于信息变化不是特别频繁的应用尚可,但对于实时要求高、海量并发的应用来说显得捉襟见肘,尤其在当前业界移动互联网蓬勃发展的趋势下,高并发与用户实时响应是 Web 应用经常面临的问题,比如金融证券的实时信息,Web 导航应用中的地理位置获取,社交网络的实时消息推送等。 传统的请求-响应模式的 Web 开发在处理此类业务场景时,通常采用实时通讯方案,常见的是: 轮询,原理简单易懂,就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求,来保持客户端和服务器端的数据同步。问题很明显,当客户端以固定频率向服务器端发送请求时,服务器端的数据可能并没有更新,带来很多无谓请求,浪费带宽,效率低下。 基于 Flash,AdobeFlash 通过自己的 Socket 实现完成数据交换,再利用 Flash 暴露出相应的接口为 JavaScript 调用,从而达到实时传输目的。此方式比轮询要高效,且因为 Flash 安装率高,应用场景比较广泛,但在移动互联网终端上 Flash 的支持并不好。IOS 系统中没有 Flash 的存在,在 Android 中虽然有 Flash 的支持,但实际的使用效果差强人意,且对移动设备的硬件配置要求较高。2012 年 Adobe 官方宣布不再支持 Android4.1+系统,宣告了 Flash 在移动终端上的死亡。 从上文可以看出,传统 Web 模式在处理高并发及实时性需求的时候,会遇到难以逾越的瓶颈,我们需要一种高效节能的双向通信机制来保证数据的实时传输。在此背景下,基于 HTML5 规范的、有 Web TCP 之称的 WebSocket 应运而生。 早期 HTML5 并没有形成业界统一的规范,各个浏览器和应用服务器厂商有着各异的类似实现,如 IBM 的 MQTT,Comet 开源框架等,直到 2014 年,HTML5 在 IBM、微软、Google 等巨头的推动和协作下终于尘埃落地,正式从草案落实为实际标准规范,各个应用服务器及浏览器厂商逐步开始统一,在 JavaEE7 中也实现了 WebSocket 协议,从而无论是客户端还是服务端的 WebSocket 都已完备,读者可以查阅HTML5 规范,熟悉新的 HTML 协议规范及 WebSocket 支持。
好的,下面是一个简单的 Spring Boot + WebSocket 聊天的开发实例: 1. 创建一个 Spring Boot 项目并添加以下依赖: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core</artifactId> <version>0.45</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.5.0</version> </dependency> ``` 2. 创建一个 WebSocket 配置类,继承自 `WebSocketConfigurer` 接口,并实现其中的 `registerWebSocketHandlers` 方法,代码如下: ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*"); } } ``` 上面的代码中,我们创建了一个 `ChatWebSocketHandler` 类来处理 WebSocket 的消息,并将其映射到 `/chat` 路径。 3. 创建一个 WebSocket 处理类 `ChatWebSocketHandler`,代码如下: ```java public class ChatWebSocketHandler extends TextWebSocketHandler { private List<WebSocketSession> sessions = new ArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession s : sessions) { s.sendMessage(message); } } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } } ``` 上面的代码中,我们重写了 `TextWebSocketHandler` 类中的一些方法来处理 WebSocket 的连接、消息发送和断开连接。 4. 创建一个简单的 HTML 页面 `index.html`,代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> <link rel="stylesheet" href="/webjars/bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>WebSocket Chat</h1> <div class="row"> <div class="col-md-12"> <div class="form-group"> <input type="text" id="input" class="form-control" placeholder="请输入消息"> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div id="messages"></div> </div> </div> </div> <script src="/webjars/jquery/3.5.1/jquery.min.js"></script> <script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script> var socket = new WebSocket('ws://' + window.location.host + '/chat'); socket.onmessage = function (event) { var message = event.data; $('#messages').append('<p>' + message + '</p>'); }; $('#input').on('keydown', function (event) { if (event.keyCode === 13) { var message = $(this).val(); socket.send(message); $(this).val(''); } }); </script> </body> </html> ``` 上面的代码中,我们使用了 Bootstrap 来美化页面,并使用了 jQuery 来操作 DOM。JavaScript 部分,我们创建了一个 WebSocket 对象连接到 `/chat` 路径,并在收到消息时将其显示在页面上。 5. 启动应用程序,访问 `http://localhost:8080/index.html`,在多个浏览器选项卡中打开页面并进行聊天。 以上就是一个简单的 Spring Boot + WebSocket 聊天的开发实例

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值