The

project address has uploaded github >

client client has implemented the overall layout of the chess game with simple h5+js. The server terminal uses node's socket.io module to interact with the client, and the placement and winning checkpoints of the chessboard are completed at the server end.

chess UI interface to see the..

client end interface here do not do too much explanation, as long as a little understanding of H5, you can go to

first take you to see the directory structure

 server.js (socket server) gobang-ui.html (is the user's chess page) index.html (is the user landing interface) home.html (is the user's landing interface) home.html (is the user lobby interface, used to match waiting if the number of online people less than 2 people, then the match failure, and will return error information. Game.html (the entrance of the client end program, embedded iframe to display each page, by changing the SRC properties of the iframe, to a pseudo page Jump) tou.jpg (a picture resource folder) tou.jpg (a chessboard interface user's head image, because the login interface only input the user name can start the game, so all users' head " 

game.html main interface

 < DOCTYPE html> < HTML lang= "en" >. The socket.io library --> < script src= "https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js" > < /script> < /head> < script;! Ng= "no" > < /iframe> < /body> < /html> 

why do we use embedded iframe to change the properties of the property to create a page jump phenomenon? Because every jump or refresh on the page will disconnect the socket connection. Just like the request request in HTTP, we should try to avoid page skipping at every time.

 / / this line indicates that the client end makes the first connection to the server end var socket = IO ('ws://localhost:3000') 

in index.html is the user's login interface

. After hitting this button, it triggers the login method in JS, but this method does not directly connect to server, because socket is connected to game.html, so now, this page is only a subpage of game.html, which immediately passes the global object parent call after judging whether value in the input is empty. The login method in the parent page (game.html) of the login method function login () {if (username.value = = = = = undefined username.value = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = {= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ') Over socket triggers the login event

 function login (username) {socket.emit ('login', username)}

{/ / / / player landing, which triggers the event / / monitor the event. Socket.on ('login', function (name) {/ / players is a global array that stores all of the player objects, if var flag = players.some (function (value) {return} {= = = = =}) New Player (socket, name) / / / / / / / players.push (player) / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / / / / / players.push / / / / / / / / / / / / / / / / / / / / players.push / / / / / / / / / / Listen to

 / / player landing successful socket.on ('home', function (data) {if (data.flag) {game.contentWindow.flag.hidden = false} else {game.contentWindow.flag.hidden = = / / / save user name and player online number E.setItem ('playerCount', data.playerCount) / location.href ='./home.html' game.src ='home.html'}}) 

home.html player waiting hall, home.html and index.html are basically consistent, so it also has a button that matches the button and touches the play event and / / player to start the match. With this.socket.on ('play', function () {/ / / / / / / / if the total number of free players is greater than or equal to 2, then the game if (playerCount > = = true / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / If (isExistFZ (self) > 0) {/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / if there is no owner, the player will become the owner self.fz = true / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / true / / / available player var player2 = null self.timer = setInterval ('being matched...') If (player2 = findPlayer (self)) {console.log ('match success') self.gamePlay = new Game (self, player2) player2.gamePlay = self.gamePlay {}}}, {} {} {} {}) there are two classes, one is a player class. The other is the Game chess game class, which corresponds to two players. The properties of the

Player class

 this.socket = socket / / socket object, the player listens to the data this.name = membership / player's name and the color of the player / / player chessman = 0 / / 0 for idle, 1 in the game I = false / / / / / / / is it matching the this.gamePlay = null / / board object this.flag = true / / / / / whether the player is going to play this.fz = false / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / are the host 

nodejs combined with Socket.IO real-time communication function detailed

  • > based on Nodejs utilization. Odejs+Socket.io implementation of the communication instance code
  • Angular and Nodejs, socket.io build chat rooms and multi chat rooms


    This concludes the body part