Foxtable(狐表)用户栏目专家坐堂 → websocket+layui实现多客户端间表格任意单元格实时推送更新


  共有4367人关注过本帖树形打印复制链接

主题:websocket+layui实现多客户端间表格任意单元格实时推送更新

帅哥哟,离线,有人找我吗?
zhenghangbo
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:一尾狐 帖子:477 积分:4569 威望:0 精华:0 注册:2018/2/7 14:30:00
websocket+layui实现多客户端间表格任意单元格实时推送更新  发帖心情 Post By:2023/4/4 13:08:00 [只看该作者]

很久没来搞研究了,这几天研究了webscoket,代码有点乱就不上传了,写一下怎么做的,。
灵感来源:http://www.foxtable.com/bbs/dispbbs.asp?BoardID=2&ID=158906&replyID=&skin=1
1.打开多个浏览器

图片点击可在新窗口打开查看此主题相关图片如下:37c064e4d2b3bf139c047cd5cbdd1e4.png
图片点击可在新窗口打开查看
2.修改其中一个浏览器表格中的数据
3.多个浏览器里面实时更新

图片点击可在新窗口打开查看此主题相关图片如下:10f2882dc592783af802c0825bd6c9c.png
图片点击可在新窗口打开查看

实现步骤
1:弄会杰哥的例子
2:服务端启动webscoket
3:设计一个带登录用户密码的登录系统(例如周老师的那个layui的订单系统),打开浏览器登录系统自动连接webscoket服务(这个很简单,把连接的代码直接写在JS中,这样刷新后也会重连。有更好的解决方法)

如何解决后端认证、断线重连、心跳
1.解决认证,网页上连接webscoket的时候带上参数(注意用?连接参数),这个document.cookie.toString(),是页面的cookie(第一次登录系统的时候后端要保存好),后端可以获取。
websocket = new WebSocket("ws://127.0.0.1:9091/WsChat?" + document.cookie.toString());

后端获取cookie代码 
Dim cqs As System.Collections.Specialized.NameValueCollection = Args(2) 
Dim Tok As String  =  cqs("token")
利用这个获取的cookie可以在系统登录去找是否存在这个cookie,不存在就单个踢下线。
2.断线重连、心跳
这部分代码网上很多,可以结合刷新不掉线一起做。

如何实现layui表格任意单元格实时更新
1.前端的更改通过webscoket的send(msg)方法给后端发更改后的数据。
2.后端收到是更新的数据后群发该信息
3.前端收到群发信息后(自己解析),关键是用js选择器选中layui表格任意单元格,然后用JQ的.text方法给单元格从新赋值。






[此贴子已经被作者于2023/6/25 9:39:48编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
ycwk
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:六尾狐 帖子:1228 积分:8561 威望:0 精华:0 注册:2016/2/2 21:52:00
  发帖心情 Post By:2023/8/9 16:15:00 [只看该作者]

杰哥的哪个例子?

 回到顶部
帅哥哟,离线,有人找我吗?
有点蓝
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:110750 积分:563676 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By:2023/8/9 16:18:00 [只看该作者]

以下是引用ycwk在2023/8/9 16:15:00的发言:
杰哥的哪个例子?

上面标红的文字里有链接

 回到顶部