第十九章:web应用开发之WebSocket

前言

也讲解了三章了,这章节开始讲解关于与前端通信相关知识。实现一个在线聊天室类似的功能或者后端推送消息到前端,在没有 时,读大学那伙还有接触过 ,也使用过轮询的方式,当 出来后,也有使用其异步连接机制进行前后端通信的。今天我们就来说说 。它是 开始提供的。

关于WebSocket

WebSocker属性

WebSocket事件

WebSocket方法

WebSocket实践

一点知识

常用注解说明

搭建一个简易聊天室

参考资料

总结

最后

老生常谈

关于WebSocket

是 开始提供的一种在单个 连接上进行 通讯的协议。

在 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

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

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

对于前端,创建一个 对象,如下:

说明:第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。

WebSocker属性

以下是 对象的属性。假定我们使用了以上代码创建了 对象:

WebSocket事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:

WebSocket方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:

WebSocket实践

前面介绍了在 中 的相关知识点,现在我们就来搭建一个后台对接应用,以实现一个简单的在线聊天室。

一点知识

后端关于 的实现是基于 标准的。该标准的出现,统一了的代码写法。只要支持web容器支持 标准,那么实现方式是一致的。而目前实现方式有两种,一种是 方式,另一种就是继承 类了。

常用注解说明

@WebSocketEndpoint注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址。

@onOpen打开一个新连接,即有新连接时,会调用被此注解的方法。

@onClose关闭连接时调用。

@onMessage当服务器接收到客户端发送的消息时所调用的方法。

@PathParam接收 参数的,与@PathVariable功能差不多,可通过url获取对应值

搭建一个简易聊天室

0.加入 依赖。

1.编写控制层,对应 的各事件。同时抽取了个公用类,进行通用方法调用。

WebSocketController.java

WebSocketUtil.java

注意点:

@ServerEndpoint的value值填写时,开头需要加上,不然会提示路径无效。

需要加上类型 注解,使得能被扫描到。

这里的 等,都在包包下的,注意区分。

2.编写主启动类,主要是加入注解 和申明一个 类。

3.启动应用,利用在线的测试工具进行测试。这里直接使用了http://coolaf.com/tool/chattest进行测试。当然也可以自己写一个 了。

首先,输入我们的服务地址:ws://127.0.0.1:8080/my-chat/okong,连接后就可以看见服务器返回的消息了。

我们再开一个标签页,然后继续以另一个身份进入:

这时,可以看见第一个页面开的,也收到消息了。现在我们发送一条消息:

然后,其中一个断开连接:

然后可以愉快聊天了,简单的一个聊天室就完成了。

参考资料

总结

本章节主要是讲解了 的使用。因为有统一标准的存在,编写 也是很简单的。对于如何一对一聊天,大家可以自行编写下,因为知道了对方名称,就能找出对方的 然后就能发送消息了。

最后

目前互联网上很多大佬都有 系列教程,如有雷同,请多多包涵了。本文是作者在电脑前一字一句敲的,每一步都是自己实践的。若文中有所错误之处,还望提出,谢谢。

老生常谈

个人QQ:

微信公众号:

完整示例:https://github.com/xie19900123/spring-boot-learning/tree/master/chapter-19

系列

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180814G090FJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券