龙空技术网

websocket详细介绍

NeverMore 102

前言:

现时咱们对“ajax中调用socket”可能比较关注,同学们都需要了解一些“ajax中调用socket”的相关资讯。那么小编在网络上搜集了一些对于“ajax中调用socket””的相关资讯,希望你们能喜欢,朋友们快快来了解一下吧!

一,什么是websocket

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理,HTTP 协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步 JavaScript 和 XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源。

Websocket应运而生,WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

二,websocket入门案例

引入maven依赖

编写websocket配置类

编写websocket核心类

@ServerEndpoint(value = "/webSocket/message/{userId}"),前端通过这个url与后端建立连接。

@OnOpen 连接建立成功时触发

@OnClose 连接关闭时触发

@OnError 客户端与服务端连接异常

buildMessageCountContent()方法主要是后台通过数据库获取当前未读消息的条数。

这里粘出来的只有OnOpen的代码,其他代码不一一罗列,大家可以自己动手试试。

前端代码

前端我使用的react框架,这个项目中,websocket 主要用来处理消息通知,此处只简单展示前端连接以及消息处理的部分代码。

接收到当前未读消息条数,在右上角的小铃铛上展示条数,然后点开小铃铛弹出未处理消息列表,后续根据具体的操作逻辑做处理。

三,总结

Websocket这种全双工通信的方式有很大的优势,像上面这块代码,以前的开发模式就是前端轮询去调用后台的接口获取未处理消息数据,这种方式既不实时又浪费资源,这边只是简单给大家介绍了websocket,给大家引入这块知识,大家可以自己尝试尝试。希望大家喜欢这篇文章。

标签: #ajax中调用socket

上一篇在express框架中使用socket.io改造

下一篇没有了