同步画板演示

同时打开2个tab,分别在画布上写下任意内容,观察演示结果,同时可设置画笔颜色及线条宽度。演示地址

初始化画布

 <canvas id="drawBoard" width="700" height="400"></canvas>
   this.canvas = document.getElementById("drawBoard");
this.ctx = this.canvas.getContext("2d");
this.stage_info = this.canvas.getBoundingClientRect(); //初始化舞台信息
this.path = { //初始化路径
beginX: 0,
beginY: 0,
endX: 0,
endY: 0,
};
this.ctx.lineWidth = this.size;//初始化线条宽度

加载irealtime.js

irealtime.js 是一个第三方websocket实时消息推送服务jssdk,可用于快速搭建安全可靠高并发的web实时通讯体系,同时支持多语言开发且兼容绝大多数主流浏览器, 了解更多

  1. 引入irealtime.js
npm i irealtime --save
  1. 初始化irealtime
import IRealTime from "irealtime";

this.irealtime = new IRealTime({
host: "hk.irealtime.cn",
appkey: "your appkey", //如何获取appkey: https://irealtime.cn/docs/get_account_and_appkey.html
onConnected: function () {
console.log("连接成功...");
},
onDisconnected: function () {
console.log("连接断开...");
},
onConnectFailed: function (error) {
console.log("连接失败...", error);
},
});
  1. 订阅消息
  this.irealtime.subscribe({
channels: ["mychannel"],
onMessage: (data) => {
this.syncPath(data.message); //通过irealtime将绘画内容同步到其他客户端
},
onSuccess: function () {},
onFailed: function () {},
});
  1. 发布消息
    publish(msg) {
this.irealtime.publish({
channel: "mychannel",
message: msg,
onSuccess: function (data) {
console.log("success:", data);
},
onFailed: function (error) {
console.log("failed:", error);
},
});
},

开始绘画

  1. 绑定鼠标事件
  draw() {
let that = this;
this.canvas.onmousedown = (e) => {
that.ctx.beginPath();
that.path.beginX = e.pageX - that.stage_info.left;
that.path.beginY = e.pageY - that.stage_info.top;
that.ctx.moveTo(that.path.beginX, that.path.beginY);
that.isDraw = true;//isDraw 是否开始绘画
this.publish( //发送mousedown消息给其他客户端
JSON.stringify({
type: "mousedown",
path: this.path,
})
);
};
this.canvas.onmousemove = (e) => {
if (that.isDraw) {
that.drawing(e); //按下并移动鼠标开始绘画
}
};
this.canvas.onmouseup = () => {
that.isDraw = false;
this.publish( //发送stop消息给其他客户端
JSON.stringify({
type: "stop",
path: this.path,
})
);
};
},
  1. 绘画动作
    drawing(e) {
this.path.endX = e.pageX - this.stage_info.left;
this.path.endY = e.pageY - this.stage_info.top;
this.ctx.lineTo(this.path.endX, this.path.endY);
this.ctx.stroke();
let data = {
type: "draw",
size: this.size,
current: this.current,
path: this.path,
};
this.publish(JSON.stringify(data));//将当前绘画路径、线条宽度、当前颜色等信息发送给其他客户端
},
  1. 同步绘画信息

通过不同类型的消息,判断客户端需要做的操作

  syncPath(data) {
const { type, size, current, path } = JSON.parse(data);
if (type === "changeColor") { //改变颜色
this.current = current;
this.ctx.strokeStyle = this.palette[this.current];
return;
}
if (type === "changeSize") { //改变线条宽度
this.size = size;
this.ctx.lineWidth = this.size;
return;
} if (type == "clear") { //清空画布
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
return;
}
if (this.path.beginX != path.beginX) { //防止重复
if (type === "mousedown") {
this.ctx.beginPath(); this.ctx.moveTo(path.beginX, path.beginY);
this.isDraw = 1;
} else if (type === "draw" && this.isDraw === 1) {
this.ctx.lineTo(path.endX, path.endY);
this.ctx.stroke();
}
}
if (type === "stop") {//停止绘画
this.isDraw = 0;
}
},

查看源码

总结

本文通过使用irealtime.js的两个简单api(subscribe|publish)便实现了基于websocket的消息发布及订阅,开发者无需过多关注websocket服务端操作,可直接使用irealtime api开发基于websocket的应用,如需了解更多内容,请直接访问https://irealtime.cn/

如何使用irealtime.js实现一个基于websocket的同步画板的更多相关文章

  1. JS实现一个基于对象的链表

    JS实现一个基于对象的链表 /*JS实现一个基于对象的链表*/ function Node(element){ this.element = element;//节点存储的元素 this.next = ...

  2. 推荐一个 基于 WebSocket 和 Redis 的 即时通信 开源项目

    项目地址 : https://github.com/2881099/im 大家可以和 SignalR 比较看看 ,  如何  ?        ^^  ^^  ^^ 这是一个 网友 写的 , 他还写了 ...

  3. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  4. 高效简易开发基于websocket 的通讯应用

    websocket的主要是为了解决在web上应用长连接进行灵活的通讯应用而产生,但websocket本身只是一个基础协议,对于消息上还不算灵活,毕竟websocket只提供文本和二进制流这种基础数据格 ...

  5. 基于WebSocket和SpringBoot的群聊天室

    引入 普通请求-响应方式:例如Servlet中HttpServletRequest和HttpServletResponse相互配合先接受请求.解析数据,再发出响应,处理完成后连接便断开了,没有数据的实 ...

  6. 使用JMeter测试基于WebSocket协议的服务

    使用JMeter测试基于WebSocket协议的服务 :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba( ...

  7. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  8. 基于docker+reveal.js搭建一个属于自己的在线ppt网站

    前言 最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种及其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然 ...

  9. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  10. 如何搭建一个基于nuxt.js的项目

    介绍 nuxt.js(中文官方文档)是vue.js的一个通用型应用框架,有了之前搭建vue项目的过程之后,搭建一个nuxt项目就会十分简单. 搭建步骤 1.打开命令提示符,进入到相关文件夹下: 2.使 ...

随机推荐

  1. myeclipse 破解

    Myeclipse 2014 破解补丁,首先需要先下载 Myeclipse 2014 官方安装文件,下载地址 http://www.jb51.net/softs/150886.html,然后下载此补丁 ...

  2. Python之多线程

    廖雪峰教程--- http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138683 ...

  3. exec 临时表,报错

    因为零时表只存在于一个exec 会话中,所以可以用 多个 select 返回到 dataset 中处理多个table,按照select 的顺序,读取 tables[0],table[1] , 多用于统 ...

  4. _CrtIsValidPointer 问题

    从微软站点: 检查指针有效性下面的示例使用 _CrtIsValidPointer 验证给定的内存范围对于读或写是否有效. _ASSERTE(_CrtIsValidPointer( address, s ...

  5. JQUERY1.9学习笔记 之内容过滤器(四) parent选择器

    描述:选择至少包含一个子节点的元素(一个标签或是文本). 例:找出所有有子元素的td标签,包含文本. <!doctype html><html lang="en" ...

  6. Unity插件之NGUI学习(6)—— 关于Widget怎样加入触发事件(触发OnClick)

    NGUI中,Button本身就带有OnClick事件,可是Sprite,Label等( 也绑有Widget的)并没有触发事件,事实上NGUI的事件触发都必须加入Box Collider,并勾选Is T ...

  7. inno setup 1

      1.简单脚本 [setup] AppName=Test AppVerName=Test DefaultDirName="d:\setup\app" AppVersion=1.0 ...

  8. cf1000E We Need More Bosses (tarjan缩点+树的直径)

    题意:无向联通图,求一条最长的路径,路径长度定义为u到v必须经过的边的个数 如果把强联通分量都缩成一个点以后,每个点内部的边都是可替代的:而又因为这是个无向图,缩完点以后就是棵树,跑两遍dfs求直径即 ...

  9. 11款插件让你的Chrome成为全世界最好用的浏览器|Chrome插件推荐

    文章来源:知乎 收录于:风云社区(SCOEE)[提供mac软件下载] 更多专题,可关注小编[磨人的小妖精],查看我的文章,也可上[风云社区 SCOEE],查找和下载相关软件资源. (一)综合类: 新买 ...

  10. 3-6 Vue中的条件渲染

    本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...