Я видел много вопросов, и ни один из них не решил мою проблему.
Вот мой код JS (app.js):
var express = require('express');
var app = express();
var serv = require('http').Server(app);
app.get('/', function(req, res) {
res.sendFile(__dirname + '/client/index.html');
});
app.use('/client', express.static(__dirname + '/client'));
serv.listen(2000);
console.log('Server has started.');
var socket_list = {};
var io = require('socket.io')(serv, {});
io.sockets.on('connection', function(socket) {
console.log('Socket Connection');
socket.id = Math.random();
socket.x = 0;
socket.y = 0;
socket_list = socket.id = socket;
});
setInterval(function() {
for(var i in socket_list) {
var socket = socket_list[i];
socket.x++;
socket.y++;
socket.emit('newPosition', {
x: socket.x,
y: socket.y
});
}
}, 1000/25);
Вот мой HTML (index.html) код:
<!DOCTYPE html>
<html>
<head>
<title>Multiplayer | HTML5</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
</head>
<body>
<canvas id="ctx" width="512" height="512" style="border: 1px solid #000;"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('ctx').getContext('2d');
ctx.font = '24px Calibri';
var socket = io();
socket.on('newPosition', function(data) {
ctx.clearRect(0,0,500,500);
ctx.fillText('P', data.x, data.y);
})
</script>
</body>
</html>
Я следую этому уроку: https://www.youtube.com/watch?v=_GioD4LpjMw&feature=youtu.be
Ему 3 года, но все идет гладко до 4:47 в видео ^^.
Используя точно такой же код выше ^^ я получаю это:
