koa+socket.io尝试简单的web动作同步开发者社区

koa+socket.io尝试简单的web动作同步

koa -e web-transcribe
cd web-transcribe && npm install

npm install --save socket.io

//io-server.js
var io=require('socket.io')();
exports.listen= function (_server) {
    return io.listen(_server);
io.on('connection', function (_socket) {
    console.log('connection:\t' + _socket.id );
    //接收客户端信息
    _socket.on('send', function (json) {
        //广播到其他客户端
        _socket.broadcast.emit('get',json);
});

var app = require('../app');
var debug = require('debug')('demo:server');
var http = require('http');
//加下面这一句，接入io-server.js
var io = require('./io-server');
var port = normalizePort(process.env.PORT || '3000');
var server = http.createServer(app.callback());
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
//加下面这一句,使socket.io监听在server上
io.listen(server);
//...

//transcribe.js
//确定正在发生动作的元素
function getSelector (element) {
    var tagName = element.tagName.toLowerCase();
    //去空格
    function trim(string) {
        return string && string.replace(/^\s+|\s+$/g,"") || string;
    //id绑定的，直接返回。
    if (element.id){
        return '#' + element.id;
    //html
    if (element == document || element == document.documentElement ){
        return 'html';
    //body
    if (element == document.body) {
        return 'html>' + tagName;
    //无父级元素，则返回自己
    if (!element.parentNode) {
        return tagName;
    //最后是有父类元素的情况下，确定target是同种兄弟元素的第几个，返回 parentNode > childNode 的精确形式
    var ix = 0,
        siblings = element.parentNode.childNodes,
        elementTagLength = 0,
        className = trim(element.className);
    //统计同种兄弟元素
    for (var i = 0, l = siblings.length; i < l; i++){
        if (className) {
            if(trim(siblings[i].className) === className){
                ++elementTagLength;
        else {
            if ( (siblings[i].nodeType == 1) && (siblings[i].tagName === element.tagName) ) {
                ++elementTagLength;
    //确定target是父类元素下的第几个兄弟元素
    for (i = 0, l = siblings.length; i < l; i++){
        var sibling = siblings[i];
        if (element === sibling) {
            return arguments.callee(element.parentNode) + '>'
                + ( className
                    ? '.' + className.replace(/\s+/g,',')
                    : tagName)
                + ( (!ix && elementTagLength === 1)
                    : ':nth-child(' + (ix + 1) + ')');
        else if (sibling.nodeType == 1) {
            ix++;
};

<script>
  var __addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function (type, handler, capture) {
    if(!this['events']){
      this['events'] = {};
    this['events'][type] = 1;
    return __addEventListener.apply(this, [type, handler, capture]);
</script>

//transcribe.js
var findHashEventsElements = function (ele, eventType) {
    if (!ele.tagName) return null;
    // 有events标识的 或者 html标签内绑定的 或者 js直接绑定的
    if ( (ele['events'] && ele['events'][eventType]) || ele.hasAttribute("on" + eventType) || ele['on' + eventType] ) {
        return ele;
    else {
        if (ele.parentNode != null) {
        //可能有事件委托，追溯上一层
            return findHashEventsElements(ele.parentNode, eventType);
        else {
            return null;
};

//transcribe.js
//启动socket连接
var socket = io();
document.addEventListener('click', function (e) {
    if (e.button === 0) {
        var target = e.target,
            enable = findHashEventsElements(target, 'click');
        if(enable){
        //发送socket信息哦
            socket.emit('send', {
                action: 'click',
                target: getSelector(target),
                time: +new Date()
},true);

//trigger.js
socket.on('connect', function () {
    console.log('connect');
    socket.on('get', function (data) {
        console.log("trigger\t"+data.target+"\t"+data.action);
        document.querySelector(data.target).dispatchEvent(new Event(data.action));
});

$(data.target).trigger(data.action)

<!DOCTYPE html>
    <script>
      var __addEventListener = Element.prototype.addEventListener;
      Element.prototype.addEventListener = function (type, handler, capture) {
        if(!this['events']){
          this['events'] = {};
        this['events'][type] = 1;
        return __addEventListener.apply(this, [type, handler, capture]);
    </script>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <button id="btn1">blue</button>
    <button onClick="body_color('red')">red</button>
    <button class="reset_btn">reset</button>
    <script>
      document.getElementById('btn1').addEventListener('click', function () {
        body_color('blue')
      document.querySelector(".reset_btn").onclick= function () {
        body_color('none');
      function body_color(color) {
          document.body.style['background'] = color;
    </script>

koa+socket.io尝试简单的web动作同步

koa+socket.io尝试简单的web动作同步

动作同步

准备工具

原理

服务端准备

客户端的准备

1、 准确捕获发生的动作和目标元素

2、 通过 socket 发送正在发生的动作和目标元素

3、 接受 socket ，并使目标元素促发目标动作。

效果图