wordpress 3.9.1/seo管理是什么

websocket实战（1） 入门

websocket实战（2） 信息处理发送、接收和编码

websocket实战（3） 错误处理及配置管理

通过前面3篇的阐述，相信可以构建一个简单的socket应用了。当然，也会遗漏了许多知识点，相信会在以后分享的实例中捎带说明下。

本文的主要是分析下tomcat官方自带的贪食蛇游戏。为什么选择分析这个项目呢。

1. 贪食蛇游戏规则，人人明白，业务方面不需要过多解释（当然这款websocket版的游戏规则也有一定特色）。
   

2. 游戏设计简单，一个对象足以完成游戏，但不涉及到一些复杂的逻辑算法。

3. 通过游戏，有很好的代入感
   

1.游戏规则介绍

1.能够实现贪吃蛇自动向前移动,一旦贪食蛇选择了方向，贪食蛇就按所选方向开始运动，可以任意。移动方向为贪吃蛇当前行走方向。

2.游戏通过键盘的上下左右四个方向控制贪吃蛇当前行走方向。（没有可以吃的食物）。

3.支持对战功能，如果发生碰撞情况，后蛇会自杀，重置信息，重新来玩。

4.如果移动出画布外，从对立方向进入，移动方向不变。

界面是"群蛇乱舞”界面。

2.贪食蛇设计

贪食蛇状态快照

贪食蛇类图

贪食蛇：有几个重要属性。颜色，头(head)，身体(tail),行动方向。

颜色：随机生成。

头&身体：决定蛇的长度，在画布中的位置。还有决定是否发生碰撞。有(x,y)坐标说明。

行动方向：东西南北四个方向。

重点说一下和websocket相关的信息。贪食蛇的session属性。

session主要负责贪食蛇状态信息的传播，将自己的颜色和位置信息传递到前端。

传播时机

1. 状态变化要传播（kill,join,..）
   

2. 位置变化要传播（包括方向，其实也是状态变化）
   

3. 重置要传播(也是状态变化）
   

分析序列图得知，其实作为游戏的websocket的EndPoint,做的事情很简单。两件事

1. 有新需求：创建贪食蛇，发送渲染命令(join)
   

2. 响应客户端的命令（方向命令）
   

不难分析，游戏贪食蛇的移动，是应该有定时器驱动的，所有贪食蛇位置的变化，都是通过SnakeTimer驱动的。然后更新位置信息，最后调用贪食蛇，将自己信息传递到前端。所以定时器，需要维护贪食蛇的聚合信息。

1.贪食蛇聚合信息维护（CRD,没有更新，贪食蛇信息的更新不属于聚合信息范畴）

protected static synchronized void addSnake(Snake snake) {if (snakes.size() == 0) {startTimer();}snakes.put(Integer.valueOf(snake.getId()), snake);
}protected static Collection<Snake> getSnakes() {return Collections.unmodifiableCollection(snakes.values());
}protected static synchronized void removeSnake(Snake snake) {snakes.remove(Integer.valueOf(snake.getId()));if (snakes.size() == 0) {stopTimer();}
}

2. 消息广播（将贪食蛇最新状态信息，实时广播到前端）

就是调用snake自动发送，不难猜，调用session相关的方法。

//SnakeTimer.java
protected static void broadcast(String message) {for (Snake snake : SnakeTimer.getSnakes()) {try {snake.sendMessage(message);} catch (IllegalStateException ise) {// An ISE can occur if an attempt is made to write to a// WebSocket connection after it has been closed. The// alternative to catching this exception is to synchronise// the writes to the clients along with the addSnake() and// removeSnake() methods that are already synchronised.}}
}
//Snake.java
protected void sendMessage(String msg) {try {session.getBasicRemote().sendText(msg);} catch (IOException ioe) {CloseReason cr =new CloseReason(CloseCodes.CLOSED_ABNORMALLY, ioe.getMessage());try {session.close(cr);} catch (IOException ioe2) {// Ignore}}
}

实时更新位置信息

websocket.snake.SnakeTimer.tick()

protected static void tick() {StringBuilder sb = new StringBuilder();for (Iterator<Snake> iterator = SnakeTimer.getSnakes().iterator();iterator.hasNext();) {Snake snake = iterator.next();snake.update(SnakeTimer.getSnakes());sb.append(snake.getLocationsJson());if (iterator.hasNext()) {sb.append(',');}}broadcast(String.format("{'type': 'update', 'data' : [%s]}",sb.toString()));
}

按方向计算贪食蛇头下一个的位置

websocket.snake.Location. getAdjacentLocation(Direction direction)

没有方向，不变化位置。

public Location getAdjacentLocation(Direction direction) {switch (direction) {case NORTH:return new Location(x, y - SnakeAnnotation.GRID_SIZE);case SOUTH:return new Location(x, y + SnakeAnnotation.GRID_SIZE);case EAST:return new Location(x + SnakeAnnotation.GRID_SIZE, y);case WEST:return new Location(x - SnakeAnnotation.GRID_SIZE, y);case NONE:// fall throughdefault:return this;}
}

websocket.snake.Snake. update(Collection<Snake> snakes)

public synchronized void update(Collection<Snake> snakes) {Location nextLocation = head.getAdjacentLocation(direction);if (nextLocation.x >= SnakeAnnotation.PLAYFIELD_WIDTH) {nextLocation.x = 0;}if (nextLocation.y >= SnakeAnnotation.PLAYFIELD_HEIGHT) {nextLocation.y = 0;}if (nextLocation.x < 0) {nextLocation.x = SnakeAnnotation.PLAYFIELD_WIDTH;}if (nextLocation.y < 0) {nextLocation.y = SnakeAnnotation.PLAYFIELD_HEIGHT;}if (direction != Direction.NONE) {tail.addFirst(head);if (tail.size() > length) {tail.removeLast();//这一步很关键，实现动态位置变化，否则蛇就无限增长了}head = nextLocation;}//处理蛇是否发生碰撞 handleCollisions(snakes);
}

判断是否发生碰撞

判断和其他，是否发生重叠。是否迎头碰撞，还是头尾碰撞。

private void handleCollisions(Collection<Snake> snakes) {for (Snake snake : snakes) {boolean headCollision = id != snake.id && snake.getHead().equals(head);boolean tailCollision = snake.getTail().contains(head);if (headCollision || tailCollision) {kill();//牺牲自己，触发dead类型信息if (id != snake.id) {snake.reward();//成全别人，让别人长度增加1.触发kill类型信息}}}
}

主要业务逻辑就分析完毕了。有对canvas感兴趣的，可以关注前端js.

var Game = {};Game.fps = 30;
Game.socket = null;
Game.nextFrame = null;
Game.interval = null;
Game.direction = 'none';
Game.gridSize = 10;function Snake() {this.snakeBody = [];this.color = null;
}Snake.prototype.draw = function(context) {for (var id in this.snakeBody) {context.fillStyle = this.color;context.fillRect(this.snakeBody[id].x, this.snakeBody[id].y, Game.gridSize, Game.gridSize);}
};Game.initialize = function() {this.entities = [];canvas = document.getElementById('playground');if (!canvas.getContext) {Console.log('Error: 2d canvas not supported by this browser.');return;}this.context = canvas.getContext('2d');window.addEventListener('keydown', function (e) {var code = e.keyCode;if (code > 36 && code < 41) {switch (code) {case 37:if (Game.direction != 'east') Game.setDirection('west');break;case 38:if (Game.direction != 'south') Game.setDirection('north');break;case 39:if (Game.direction != 'west') Game.setDirection('east');break;case 40:if (Game.direction != 'north') Game.setDirection('south');break;}}}, false);if (window.location.protocol == 'http:') {Game.connect('ws://' + window.location.host + '/wsexample/websocket/snake');} else {Game.connect('wss://' + window.location.host + '/wsexample/websocket/snake');}
};Game.setDirection  = function(direction) {Game.direction = direction;Game.socket.send(direction);Console.log('Sent: Direction ' + direction);
};Game.startGameLoop = function() {if (window.webkitRequestAnimationFrame) {Game.nextFrame = function () {webkitRequestAnimationFrame(Game.run);};} else if (window.mozRequestAnimationFrame) {Game.nextFrame = function () {mozRequestAnimationFrame(Game.run);};} else {Game.interval = setInterval(Game.run, 1000 / Game.fps);}if (Game.nextFrame != null) {Game.nextFrame();}
};Game.stopGameLoop = function () {Game.nextFrame = null;if (Game.interval != null) {clearInterval(Game.interval);}
};Game.draw = function() {this.context.clearRect(0, 0, 640, 480);for (var id in this.entities) {this.entities[id].draw(this.context);}
};Game.addSnake = function(id, color) {Game.entities[id] = new Snake();Game.entities[id].color = color;
};Game.updateSnake = function(id, snakeBody) {if (typeof Game.entities[id] != "undefined") {Game.entities[id].snakeBody = snakeBody;}
};Game.removeSnake = function(id) {Game.entities[id] = null;// Force GC.delete Game.entities[id];
};Game.run = (function() {var skipTicks = 1000 / Game.fps, nextGameTick = (new Date).getTime();return function() {while ((new Date).getTime() > nextGameTick) {nextGameTick += skipTicks;}Game.draw();if (Game.nextFrame != null) {Game.nextFrame();}};
})();Game.connect = (function(host) {if ('WebSocket' in window) {Game.socket = new WebSocket(host);} else if ('MozWebSocket' in window) {Game.socket = new MozWebSocket(host);} else {Console.log('Error: WebSocket is not supported by this browser.');return;}Game.socket.onopen = function () {// Socket open.. start the game loop.Console.log('Info: WebSocket connection opened.');Console.log('Info: Press an arrow key to begin.');Game.startGameLoop();setInterval(function() {// Prevent server read timeout.Game.socket.send('ping');}, 5000);};Game.socket.onclose = function () {Console.log('Info: WebSocket closed.');Game.stopGameLoop();};Game.socket.onmessage = function (message) {// _Potential_ security hole, consider using json lib to parse data in production.var packet = eval('(' + message.data + ')');switch (packet.type) {case 'update':for (var i = 0; i < packet.data.length; i++) {Game.updateSnake(packet.data[i].id, packet.data[i].body);}break;case 'join':for (var j = 0; j < packet.data.length; j++) {Game.addSnake(packet.data[j].id, packet.data[j].color);}break;case 'leave':Game.removeSnake(packet.id);break;case 'dead':Console.log('Info: Your snake is dead, bad luck!');Game.direction = 'none';break;case 'kill':Console.log('Info: Head shot!');break;}};
});var Console = {};Console.log = (function(message) {var console = document.getElementById('console');var p = document.createElement('p');p.style.wordWrap = 'break-word';p.innerHTML = message;console.appendChild(p);while (console.childNodes.length > 25) {console.removeChild(console.firstChild);}console.scrollTop = console.scrollHeight;
});Game.initialize();document.addEventListener("DOMContentLoaded", function() {// Remove elements with "noscript" class - <noscript> is not allowed in XHTMLvar noscripts = document.getElementsByClassName("noscript");for (var i = 0; i < noscripts.length; i++) {noscripts[i].parentNode.removeChild(noscripts[i]);}
}, false);

结论

通过阅读一些官方文档的代码，学习人家的编码风格，细节。比如线程安全方面。js的面向对象编写，很优雅。不像笔者遇到的经常看到的一个方法，一个方法式的嵌套调用，不考虑性能，就阅读起来就特别费劲。