18.2 不同用户 不同颜色光标 redis

可莉
• 阅读 403

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

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

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

OK

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

18.2 不同用户 不同颜色光标 redis

18.2 不同用户 不同颜色光标 redis

18.2 不同用户 不同颜色光标 redis

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

发送给server

发送端 写完了 

我们还要写个接收端

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

18.2 不同用户 不同颜色光标 redis

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

这个要我们自己定义

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

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

可以 存 名字 头像 颜色 等等

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

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

18.2 不同用户 不同颜色光标 redis

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

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

做一个判断

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

marker是什么?

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

用marker模拟光标

18.2 不同用户 不同颜色光标 redis

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

18.2 不同用户 不同颜色光标 redis

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

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

18.2 不同用户 不同颜色光标 redis

CSS代码

 18.2 不同用户 不同颜色光标 redis

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

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

18.2 不同用户 不同颜色光标 redis

我们把初始值设为0

 18.2 不同用户 不同颜色光标 redis

18.2 不同用户 不同颜色光标 redis

18.2 不同用户 不同颜色光标 redis

18.2 不同用户 不同颜色光标 redis

18.2 不同用户 不同颜色光标 redis

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

18.2 不同用户 不同颜色光标 redis

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

18.2 不同用户 不同颜色光标 redis

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

我们下面去完成server端

我们server端的service

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

下面我们来写一个‘cursor’

18.2 不同用户 不同颜色光标 redis

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

所以呢 我写成一个method

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

18.2 不同用户 不同颜色光标 redis

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

18.2 不同用户 不同颜色光标 redis

OK 

这样看起来就很清晰了

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这