本文共 7279 字，大约阅读时间需要 24 分钟。

nodeJs+express+soket.io五子棋实战之浏览器兼容性处理

1. 目录结构：
   
   
2. 演示URL：http://39.96.31.43:3100/
3. 演示截图
4. 演示截图2：
5. 源码展示：
6. 客户端index.js：

window.onload=function(){    var sence = document.getElementById('sence'),        //棋盘大小        ROW = 20,NUM = ROW*ROW,        //场景宽度        senceWidth = sence.offsetWidth,        //每颗棋子的宽度        blockWidth = Math.floor( (senceWidth-ROW)/ROW ) + 'px',         //用户开始默认可以落子        canDrop = true,        //用户默认落子为白棋        color = 'white',        //两个字典，用来存放白棋和黑棋的已落子的位置；以坐标为建，值为true        whiteBlocks = {},blackBlocks = {};        console.log(sence);//创建场景(function (){    var el,    //在棋盘上画线        rowline,        colline;    for ( var i = 0;i < ROW;i++){        //按照计算好的间隔放置横线        rowline = document.createElement('div');        rowline.setAttribute('class','row');        rowline.style.top= (senceWidth/ROW)/2 + (senceWidth/ROW)*i + 'px';        sence.appendChild(rowline);        //按照计算好的间隔放置竖线        colline = document.createElement('div');        colline.setAttribute('class','col');        colline.style.left= (senceWidth/ROW)/2 + (senceWidth/ROW)*i + 'px';        sence.appendChild(colline);                for ( var j = 0;j < ROW;j++){            el = document.createElement('div');            el.style.width = blockWidth;            el.style.height = blockWidth;            el.setAttribute('class','block');            el.setAttribute('id',i + '_' + j);            sence.appendChild(el);        }    }})();console.log('1')var id2Position = function(id){    console.log(id)    return {x:Number(id.split('_')[0]),y:Number(id.split('_')[1])};};var position2Id = function(x,y){    return x + '_' + y;};console.log('abc');//判断落子皇后该色其是否连5var isHasWinner = function(id,dic){    var x = id2Position(id).x;    var y = id2Position(id).y;    //用来记录横，竖，左斜，右斜方向的连续棋子数量    var rowCount = 1,colCout = 1,leftSkewLineCount = 1,righeSkewlineCount = 1;    //tx ty作为游标，左移，右移，上移，下移，左上，右下，左下，右上移动    //每次数万某个方向的连续棋子后，游标会回到原点    var tx,ty;    //注意：一下判断5连以上不算成功，如果规则有变动，条件改为大于五就可以    tx = x;ty = y;    while(dic[ position2Id(tx,ty+1) ]){        rowCount++;        ty++;    }    tx = x;ty = y;    while(dic[ position2Id(tx,ty-1) ]){        rowCount++;        ty--;    };    if( rowCount ==5 ) return true;    tx = x;ty = y;    while(dic[ position2Id(tx+1,ty) ]){        colCout++;        tx++;    }    tx = x;ty = y;    while(dic[ position2Id(tx-1,ty) ]){        colCout++;        tx--;    };    if( colCout ==5 ) return true;    tx = x;ty = y;    while(dic[ position2Id(tx+1,ty+1) ]){        leftSkewLineCount++;        tx++;        ty++;    }    tx = x;ty = y;    while(dic[ position2Id(tx-1,ty-1) ]){        leftSkewLineCount++;        tx--;        ty--;    }    if( leftSkewLineCount == 5){        return true;    }    tx = x;ty = y;    while(dic[ position2Id(tx-1,ty+1) ]){        righeSkewlineCount++;        tx--;        ty++;    }    tx = x;ty = y;    while(dic[ position2Id(tx+1,ty-1) ]){        leftSkewLineCount++;        tx++;        ty--;    }    if( righeSkewlineCount == 5) return true;    return false;}; //处理对手发送过来的信息；//  var socket = io.connect('http://127.0.0.1:3100'); if (/Firefox\/\s/.test(navigator.userAgent)){    var socket = io.connect('http://127.0.0.1:3100',{transports:['xhr-polling']}); } else if (/MSIE (\d+.\d+);/.test(navigator.userAgent)){    var socket = io.connect('http://127.0.0.1:3100',{transports:['jsonp-polling']}); } else {     var socket = io.connect('http://127.0.0.1:3100'); }    socket.on('message',function(data){        // console.log('data');        canDrop = true;        var el = document.getElementById(data.id);        // console.log(el)        el.setAttribute('has-one','true');        if(data.color == 'white'){            color = 'black';            el.setAttribute('class','block white');            whiteBlocks[data.id] = true;             if(isHasWinner(data.id,whiteBlocks)){                 alert('白棋赢了');                 location.reload();//Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。             }            }else{                  el.setAttribute('class','block black');                 blackBlocks[data.id] = true;                 if( isHasWinner(data.id,blackBlocks)){                     alert('黑棋赢了');                     location.reload();                 }             }        });        sence.onclick = function(e){             // console.log('gyu')             var el = e.target;//触发事件的对象 (某个DOM元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时;             if( !canDrop || el.hasAttribute('has-one') || el == this){//hasAttributes属性返回一个布尔值true或false,来表明当前元素节点是否有至少一个的属性                return;             }             el.setAttribute('has-one','true');             canDrop = false;             var id = el.getAttribute('id');             if(color == 'white'){                 el.setAttribute('class','block white');                 whiteBlocks[id] = true;                 socket.emit('message',{id:id,color:'white'});//socket.emit('action',data);表示发送了一个action命令，还有data数据，在另一端接收时，可以这么写： socket.on('action',function(data){...});                 if(isHasWinner(id,whiteBlocks)){                     alert('白棋赢');                     location.reload();                 }             }             if( color == 'black'){                 el.setAttribute('class','block black');                 blackBlocks[id]=true;                 socket.emit('message' , {id:id,color:'black'});                 if(isHasWinner(id,blackBlocks)){                     alert('黑棋赢了');                     location.reload();                 }             }            };};

7. 样式index.css

body{
       background: #4b4832;    font-family: 微软雅黑;    color: #666;}.sence{
       width: 600px;    height: 600px;    margin: 50px auto;    border-right: none;    border-bottom: none;    position: relative;    box-shadow: -10px 10px 15px black;    background: #8d6d45;    border: 2px solid black;}.sence .block{
       float: left;    margin-right: 1px;    margin-bottom: 1px;    border-radius: 50%;    position: relative;    z-index: 8884;}.sence .row,.sence .col{
       background: #4d392b;    position: absolute;}.sence .row{
       width:100%;    height: 1px;    top: 0;}.sence .col{
       width:1px;    height: 100%;    top: 0;}.white{
       background: #ffffff;}.black{
       background: #2c1d1b;}

8. index.html:

9. 服务端index.js

var express = require('express');var path = require('path');var app = express()var http = require('http').Server(app);var io = require('socket.io')(http);io.on('connection',function(socket){    socket.on('message',function(data){        socket.broadcast.emit('message',data);    });});app.use('/public/',express.static(path.join(__dirname,'./public/')))app.use('/node_modules/',express.static(path.join(__dirname,'./node_modules/')))app.get('/',function(req,res){    res.sendFile(__dirname +  '/index.html');}); http.listen(3100,function(){     console.log('runing...') })

10. socket.io 兼容性代码：

if (/Firefox\/\s/.test(navigator.userAgent)){    var socket = io.connect('http://127.0.0.1:3100',{transports:['xhr-polling']}); } else if (/MSIE (\d+.\d+);/.test(navigator.userAgent)){    var socket = io.connect('http://127.0.0.1:3100',{transports:['jsonp-polling']}); } else {     var socket = io.connect('http://127.0.0.1:3100'); }

转载地址：http://xgozi.baihongyu.com/