前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jfinal+webSocket+layim实现实时聊天功能

jfinal+webSocket+layim实现实时聊天功能

作者头像
爱上歆随懿恫
发布2022-08-15 14:10:49
1.6K1
发布2022-08-15 14:10:49
举报
文章被收录于专栏:学点博客

JFinal 是基于Java 语言的极速 web 开发框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。在拥有Java语言所有优势的同时再拥有ruby、python等动态语言的开发效率。

layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式。主要面向的是全层次的前后端开发者,极易上手,开箱即用,非常适合网页界面的快速开发。

LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案,其包含的只是一套前端源代码素材和相关的模拟示例,没有后端程序及数据库存储等服务。

所以我们需要做一个后台。

创建一个web项目并添加一下依赖,在configHandler中添加配置:me.add(new UrlSkipHandler("^/websocket.ws", false));

新建一个WebSocket详见如下截图。

具体jfinal配置详见官网,新建表sysfriend、sysgroup、sysim、friendrelationship、grouprelationship,对应的model如下:

根据layim参数要求需要实现获取用户列表和群用户列表两个接口,新建一个ImService具体如下:

我们根据layin接口参数封装mine、friend和group数据返回给前端:

当用户点击群时,传入群id查询群中成员信息,实现接口如下:

最终展现效果如下:

前端部分代码实现代码如下:

以下简要介绍一下 WebSocket 的原理及运行机制。

WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:

WebSocket 是一种双向通信协议,在建立连接后,WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据,就像 Socket 一样;

WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接,连接成功后才能相互通信。

new WebSocket对象,参数是需要连接的服务器端的地址,同http协议使用http://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。

这里我们在集成一下腾讯ai中的语音闲聊,具体参考官网参考文档。实现代码如下:

效果如下:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-06-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 学点博客 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云数据库 Redis
腾讯云数据库 Redis(TencentDB for Redis)是腾讯云打造的兼容 Redis 协议的缓存和存储服务。丰富的数据结构能帮助您完成不同类型的业务场景开发。支持主从热备,提供自动容灾切换、数据备份、故障迁移、实例监控、在线扩容、数据回档等全套的数据库服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档