上次,我们完成了 change 这个event 通过 collaborationsrvice 与 server 进行 sockrt io 将 client端的监听的 change 发给 server 然后广播给 同一 session内的其他人 从而实现同步

这次,我们要做一个 cusor的event  就是 光标的位置同步

和上一次原理是一模一样的

OK

调用 ace 的API 获得cursor (获得的是一个Object类型的map,里面有‘row’ ‘column’等)

这里说的接收cursor是接收client端发来的 cursor信息

发送给server

发送端 写完了

我们还要写个接收端

接收server发来的信息,监听“cursorMove”

changeClientId是光标变化的client的id ,因为我们在支持多人操作的时候,要区分每个人的光标(比如颜色啊)。

这个要我们自己定义

有了想x y changeClientId 我们就可以在我们cilent editor上

我们在本地存 所有人的光标信息 需要一个map

可以 存 名字 头像 颜色 等等

因为在ace里面操作光标是通过先把旧的光标删掉 再加入新的光标 他没有直接操作光标变化的方法

所以 我们需要维护有一个 保存用户光标信息的一个map

当我们收到server端发来的光标变化信息changeClientId

我们首先应该去我们的本地的clentsInfo的map里面查一下。

做一个判断

  是  那么就需要 我们删掉旧的光标

marker是什么?

在ace里maker就是我们选择文本时背景颜色变灰色的那个范围,我们把他设置成很细,这样看着就像是一个竖线的光标,。

用marker模拟光标

否  第一次 那么把他加入 clentsInfo中来

每加一个人 就分给他一个颜色 来区分

这就需要js来动态的改变css

CSS代码

z-index:100 设置100 就不会editor自己遮挡掉,width:3px 这样我们的选中的文本背景颜色范围就很小,就能模拟光标。!important这样不被他的父级或者上上级CSS覆盖

里面的clientNum是我定义的一个计数器,我们需要知道我们clentInfo里面有多少编辑者,这样下次有人再加入的时候我们好分配颜色,不至于相同混淆。

我们把初始值设为0

指定光标的(marker)的位置 颜色(动态随机一个RGB值,但是呢 颜色都很丑,所以我们就自己存了一个40多个比较明显好看的RGB值到一个TS文件中,你美添加一个人,我们就在我们的颜色列表里面选一个值)

一般这种静态文件(什么照片啦等等)都存在这里

OK,我们完成了 预定义的光标颜色选取。

我们下面去完成server端

我们server端的service

SockService建立连接后 处理了‘change’

下面我们来写一个‘cursor’

我们发现 change 和cursor有很代码都是重复的

所以呢 我写成一个method

我们发现 有三个参数 是需要我们传入的socketId,evenName,dataSting(就是复制粘贴 修修改改,)我们需要这个方法只

然后我们将上面两个方法中重复的部分 调用这个方法就好了

OK

这样看起来就很清晰了

18.2 不同用户 不同颜色光标 redis的更多相关文章

  1. 18 章 CSS 链接、光标、 DHTML 、缩放

    1.CSS 中链接的使用 2.CSS 中光标的使用 3.CSS 中 DHTML 的使用 4.CSS 中缩放的使用 1 18 8. .1 1 S CSS  中 链接的使用 超链接伪类属性 a:link ...

  2. 想知道谁是你的最佳用户?基于Redis实现排行榜周期榜与最近N期榜

    本文由云+社区发表 前言 业务已基于Redis实现了一个高可用的排行榜服务,长期以来相安无事.有一天,产品说:我要一个按周排名的排行榜,以反映本周内用户的活跃情况.于是周榜(按周重置更新的榜单)诞生了 ...

  3. 在fedora 18中将普通用户设置为sudo权限

    将一般的用户加入sudo组is not in the sudoers file. This incident will be reported 解决方法 在一般用户下执行sudo命令提示xxx is ...

  4. mysql5.7.18.1修改用户密码报错ERROR 1054 (42S22): Unknown column 'password' in 'field list'解决办法

    本意向修改一个用户的密码,网上搜到的命令为如下 mysql> update user set password=password(“新密码”) where user=”用户名”; 执行后报错 E ...

  5. 2017.7.18 linux下用户、组和文件的操作

    参考来自:<鸟叔的linux私房菜(基础学习篇)-第14章> 0 目的 在linux下搭建ELK环境时,因为elasticsearch不能在root下操作,所以要为其新增一个用户,以及随之 ...

  6. Ubuntu 18.04下用户的创建、修改权限及删除用户的方法

    1. 创建用户 2. 修改用户权限 3. 删除用户 1. 创建用户useradd命令 //命令一:这种命令会在登录界面显示用户名sudo useradd -m XXX -d /home/XXX -s ...

  7. springSecurity + jwt + redis 前后端分离用户认证和授权

    记录一下使用springSecurity搭建用户认证和授权的代码... 技术栈使用springSecurity + redis + JWT + mybatisPlus 部分代码来自:https://b ...

  8. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(八) 之 用 Redis 实现用户在线离线状态消息处理

    前言 上篇的预告好像是“聊天室的小细节,你都注意到了吗?”.今天也是为那篇做铺垫吧.之前的版本有好多问题,比如:当前登录用户是否合法问题,userid参数如果随便传后台没有验证.还有一个致命的问题,用 ...

  9. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(九) 之 用 Redis 实现用户在线离线状态消息处理(一)

    前言 上一篇中简单讲解了用Redis缓存在线用户逻辑.篇幅也比较小,本篇将详细实现用户的上线下线通知.图片效果转换功能.而且,代码和开发思路都会详细介绍. 效果展示 目前有三个用户,user1,use ...

随机推荐

  1. BCGcontrolBar(二) 改变RIBBON字体

    在xp系统下 BCGcontrolBar字体会发虚 这时候重新设置下字体就行了 在单文档的MainFram的onCreate中加入 CFont *font=m_wndRibbonBar.GetFont ...

  2. (转)SQL知识_SqlParameter数组

    原文地址:http://www.cnblogs.com/FredTang/archive/2012/03/29/2423651.html 温故而知新,做做笔记先.        SqlParamete ...

  3. (转)CLR20R3 程序终止的几种解决方案

    原文地址:https://blog.csdn.net/fxfeixue/article/details/4466899 这是因为.NET Framework 1.0 和 1.1 这两个版本对许多未处理 ...

  4. hadoop 分布式机群搭建

    描述:鉴于本地电脑内存限制,采用三台虚机安装此环境. 主机名,分别为master.slave1.slave2. zookeeper分别安装这三台机器上,master和slave1做主从备份, slav ...

  5. Java连接postgreSQL数据库,找不到表。

    postgreSQL数据库遵守SQL标准,表名库名不区分大小写. 数据库中是存在 gongan_address_ALL的表的,但是执行下列代码就会出错. stmt = c.createStatemen ...

  6. Linux常用操作分享

    Java开发经常遇到的linux相关操作 1.常用的上传下载(Xshell5) 1).get 从远程服务器上下载一个文件存放到本地,如下: 先通过lcd切换到本地那个目录下,然后通过get file ...

  7. 背景图片的移动----background-attach-----background-repeat

    background-repeat:默认是平铺的,也即是还有空间的话将一张接着一张显示 设置为 no-repeat  就最多显示一张 background-attachment:设置是否固定图片,在有 ...

  8. 5.2_k-means案例分析

        k-means案例分析 手写数字数据上K-Means聚类的演示 from sklearn.metrics import silhouette_score from sklearn.cluste ...

  9. 【Python爬虫实战】 使用代理服务器

    代理服务器:是一个处于我们与互联网中间的服务器,如果使用代理服务器,我们浏览信息的时候,先向代理服务器发出请求,然后又代理服务向互联网获取信息,再返回给我们使用代理服务器进行信息爬取,可以很好的解决I ...

  10. uva-10422-骑士-搜索题

    题意: 给你一个5X5的图,棋盘上骑士的走法自己去百度,问能不能在10步内走到目标图, 解题思路: 从目标图开始往前走10步,保存所有能走到的图,然后输入,查找是否存在这个图,存在就是可以走到,不存在 ...