create first working communication
This commit is contained in:
@@ -1,55 +1,157 @@
|
||||
import React from 'react';
|
||||
import Grid from './grid/grid';
|
||||
import GridControl from './grid/grid-control';
|
||||
import Logging from './system/logging';
|
||||
|
||||
class MineSeeker extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
var gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
|
||||
var channel = "acme/channel/" + gameAssoc;
|
||||
var log = new Logging();
|
||||
log.state.logging = props.env === 'dev';
|
||||
|
||||
var grid = new Grid();
|
||||
|
||||
this.state = {
|
||||
gameInherited: props.gameId !== '',
|
||||
gameAssoc: gameAssoc,
|
||||
log: log,
|
||||
websocket: null,
|
||||
channel: channel,
|
||||
createGrid: false,
|
||||
grid: grid.state.grid
|
||||
}
|
||||
}
|
||||
|
||||
makeGameAssoc(len) {
|
||||
var text = "";
|
||||
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
for (var i = 0; i < len; i++) {
|
||||
text += possible.charAt(Math.floor(Math.random() * possible.length));
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
topicProcess(payload, grid) {
|
||||
var log = this.state.log;
|
||||
|
||||
/** It is a PUBLISH */
|
||||
if (typeof payload.data !== 'undefined') {
|
||||
log.i([payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[0], payload]);
|
||||
|
||||
/** because the activePlayer has been changed before the data come */
|
||||
if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
|
||||
this.refs.gridControl.stepEvent(payload.data.coords, true);
|
||||
}
|
||||
} else {
|
||||
/** It is a SUBSCRIBE */
|
||||
log.i(["Something happened on the channel!", payload]);
|
||||
|
||||
if (this.refs.gridControl.state.webPlayer === null) {
|
||||
if (payload.userCnt === 1) {
|
||||
this.refs.gridControl.state.webPlayer = 'red';
|
||||
}
|
||||
|
||||
if (payload.userCnt === 2) {
|
||||
this.refs.gridControl.state.webPlayer = 'blue';
|
||||
this.refs.gridControl.state.grid = JSON.parse(grid);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** after rendering */
|
||||
componentDidMount() {
|
||||
var websocket = WS.connect("ws://mine.dev:6450");
|
||||
this.state.websocket = WS.connect("ws://mine.dev:6450");
|
||||
|
||||
/** session is an Autobahn JS WAMP session. */
|
||||
websocket.on("socket/connect", function (session) {
|
||||
console.info("Successfully Connected!");
|
||||
var log = this.state.log;
|
||||
|
||||
session.subscribe("acme/channel", function(uri, payload){
|
||||
console.log("Received message", payload.msg);
|
||||
});
|
||||
/**
|
||||
* Connect
|
||||
* Session is an Autobahn JS WAMP session.
|
||||
*/
|
||||
this.state.websocket.on("socket/connect", (session) => {
|
||||
log.i("Successfully connected to the Server!");
|
||||
|
||||
session.call("sample/sum", [2, 5]).then(
|
||||
function (result) {
|
||||
console.log("RPC Valid!", result);
|
||||
},
|
||||
function (error, desc) {
|
||||
console.log("RPC Error", error, desc);
|
||||
}
|
||||
);
|
||||
/**
|
||||
* Connect
|
||||
* Send grid information to the server
|
||||
*/
|
||||
session
|
||||
.call(
|
||||
this.state.gameInherited ? "sample/connectGame" : "sample/startGame",
|
||||
[this.state.grid, this.state.gameAssoc]
|
||||
)
|
||||
.then(
|
||||
(grid) => {
|
||||
log.l(["Grid has been created! Return w/ gameAssoc."]);
|
||||
|
||||
session.publish("acme/channel", {msg: "This is a message!"});
|
||||
/** Connect */
|
||||
session.subscribe(
|
||||
this.state.channel,
|
||||
(uri, payload, log) => {
|
||||
|
||||
// session.publish("acme/channel", {msg: "I'm leaving, I will not see the next message"});
|
||||
//
|
||||
// session.unsubscribe("acme/channel");
|
||||
//
|
||||
// session.publish("acme/channel", {msg: "I won't see this"});
|
||||
//
|
||||
// session.subscribe("acme/channel", function (uri, payload) {
|
||||
// console.log("Received message", payload.msg);
|
||||
// });
|
||||
//
|
||||
// session.publish("acme/channel", {msg: "I'm back!"});
|
||||
/** Create GridControl class */
|
||||
if (this.state.createGrid) {
|
||||
this.topicProcess(payload, grid);
|
||||
} else {
|
||||
this.setState({createGrid: true}, () => {
|
||||
/** Start GridControl tag */
|
||||
this.refs.gridControl.setState({grid: this.state.grid}, () => {
|
||||
this.refs.gridControl.state.session = session;
|
||||
this.refs.gridControl.state.channel = this.state.channel;
|
||||
|
||||
this.topicProcess(payload, grid);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
(error, desc) => log.e(["RPC Error", error, desc])
|
||||
);
|
||||
});
|
||||
|
||||
/** error provides us with some insight into the disconnection: error.reason and error.code */
|
||||
websocket.on("socket/disconnect", function (error) {
|
||||
console.info("Disconnected for " + error.reason + " with code " + error.code);
|
||||
/**
|
||||
* Connect
|
||||
* Error provides us with some insight into the disconnection: error.reason and error.code
|
||||
*/
|
||||
this.state.websocket.on("socket/disconnect", function (error) {
|
||||
log.w("Disconnected for " + error.reason + " with code " + error.code);
|
||||
});
|
||||
}
|
||||
|
||||
createGrid() {
|
||||
return this.state.createGrid
|
||||
? <GridControl ref="gridControl"
|
||||
env={this.props.env === 'dev'}
|
||||
log={this.state.log}/>
|
||||
: '';
|
||||
}
|
||||
|
||||
/** FOR DEVELOPMENT */
|
||||
createLink() {
|
||||
return this.state.gameAssoc
|
||||
? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
|
||||
: '';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div></div>
|
||||
// <GridControl ref="gridControl"/>
|
||||
<div>
|
||||
<div>
|
||||
{this.createLink()}
|
||||
</div>
|
||||
{this.createGrid()}
|
||||
{/*<GridControl ref="gridControl"*/}
|
||||
{/*env={this.props.env === 'dev'}*/}
|
||||
{/*log={this.state.log}/>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MineSeeker;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user