同步画板演示

同时打开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的项目,直接 ...

随机推荐

  1. mysql分组合并GROUP_CONCAT

    SELECT  pid,  GROUP_CONCAT(field ORDER BY  coder desc)  'msg'from   product_field    GROUP BY  pid 分 ...

  2. [LeetCode] Longest Palindromic Substring(manacher algorithm)

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  3. 【原】Redis入门教程

    最近在学习Redis,写几篇文章记录一下学习过程:Redis入门教程. 1.Redis基本概念 Redis Redis Keys Redis 基本数据类型 Redis基本操作 遍历操作 Pub-Sub ...

  4. python模块基础之getpass模块

    getpass模块提供了可移植的密码输入,一共包括下面两个函数: 1. getpass.getpass() 2. getpass.getuser() getpass.getpass([prompt[, ...

  5. C-KMP

    一.BF算法 --传统算法 BF算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串P的第一个字符进行匹配,若相等,则继续比较S的第二个字符和P的第二个字符:若不相等,则比较S的 ...

  6. 搭建非域AlwaysOn win2016+SQL2016

    搭建非域AlwaysOn win2016+SQL2016 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnblogs.co ...

  7. vue发送请求----vue-resource

    使用插件vue-resource 官方提供的接口,在vue官网找不到 但在github中可以找到 安装:cnpm install vue-resource --save 第一步:注意要加--save, ...

  8. weblogic的web.xml报错----Malformed UTF-8 char -- is an XML encoding declaration missing

    weblogic报错: Malformed UTF-8 char -- is an XML encoding declaration missing 把编码修改成utf8,上传到weblogic就报这 ...

  9. [luogu1198][bzoj1012][JSOI2008]最大数【线段树+分块】

    题目描述 区间查询最大值,结尾插入,强制在线. 分析 线段树可以做,但是练了一下分块,发现自己打错了两个地方,一个是分块的地方把/打成了%,还有是分块的时候标号要-1. 其他也没什么要多讲的. 代码 ...

  10. PHP下载远程图片的3个方法

    From: http://blog.csdn.net/iefreer/article/details/46930239 直接上代码 <?php function dlfile1($file_ur ...