0
下のリンクにあるホワイトボードの描画キャンバスで作業しています。 https://socket.io/demos/whiteboard/Socket.IOの接続ポーリングエラー404が見つかりません
私はすべての設定要件に従っているが、私はアプリケーションを実行すると、Socket.IoがLISTNERへの応答を取得していないように思えコンソールから
Failed to load resource: the server responded with a status of 404 (Not Found)
socket.io.js:1
GET http://localhost/socket.io/?EIO=3&transport=polling&t=1505327119965-1 404 (Not Found)
i.create @ socket.io.js:1
i @ socket.io.js:1
o.request @ socket.io.js:1
o.doPoll @ socket.io.js:1
n.poll @ socket.io.js:2
n.doOpen @ socket.io.js:2
n.open @ socket.io.js:1
r.open @ socket.io.js:1
r @ socket.io.js:1
r @ socket.io.js:1
n.open.n.connect @ socket.io.js:1
(anonymous) @ socket.io.js:1
setTimeout (async)
n.reconnect @ socket.io.js:1
n.maybeReconnectOnOpen @ socket.io.js:1
(anonymous) @ socket.io.js:1
n.emit @ socket.io.js:1
r.onError @ socket.io.js:1
(anonymous) @ socket.io.js:1
n.emit @ socket.io.js:1
n.onError @ socket.io.js:1
(anonymous) @ socket.io.js:1
n.emit @ socket.io.js:1
i.onError @ socket.io.js:1
(anonymous) @ socket.io.js:1
setTimeout (async)
hasXDR.e.onreadystatechange @ socket.io.js:1
socket.io.js:1
GET http://localhost/socket.io/?EIO=3&transport=polling&t=1505327122954-2 404 (Not Found)
の下に、このエラーが生じています。誰かが問題を解決するのを手伝ってください。ここで
はserver.jsここ
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;
app.use(express.static(__dirname + '/public'));
function onConnection(socket){
socket.on('drawing', (data) => socket.broadcast.emit('drawing', data));
}
io.on('connection', onConnection);
http.listen(port,() => console.log('listening on port ' + port));
である私は、問題はあなたのサーバーをセットアップする方法だと思うのindex.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js"></script>
<style>
.whiteboard {
height: 100%;
width: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
</head>
<body>
<canvas class="whiteboard" ></canvas>
<script src="./socket.io/socket.io.js"></script>
<script>
'use strict';
(function() {
var socket = io();
var canvas = document.getElementsByClassName('whiteboard')[0];
var colors = document.getElementsByClassName('color');
var context = canvas.getContext('2d');
var current = {
color: 'black'
};
var drawing = false;
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mouseout', onMouseUp, false);
canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);
for (var i = 0; i < colors.length; i++){
colors[i].addEventListener('click', onColorUpdate, false);
}
socket.on('drawing', onDrawingEvent);
window.addEventListener('resize', onResize, false);
onResize();
function drawLine(x0, y0, x1, y1, color, emit){
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = 2;
context.stroke();
context.closePath();
if (!emit) { return; }
var w = canvas.width;
var h = canvas.height;
socket.emit('drawing', {
x0: x0/w,
y0: y0/h,
x1: x1/w,
y1: y1/h,
color: color
});
}
function onMouseDown(e){
drawing = true;
current.x = e.clientX;
current.y = e.clientY;
}
function onMouseUp(e){
if (!drawing) { return; }
drawing = false;
drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
}
function onMouseMove(e){
if (!drawing) { return; }
drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
current.x = e.clientX;
current.y = e.clientY;
}
function onColorUpdate(e){
current.color = e.target.className.split(' ')[1];
}
// limit the number of events per second
function throttle(callback, delay) {
var previousCall = new Date().getTime();
return function() {
var time = new Date().getTime();
if ((time - previousCall) >= delay) {
previousCall = time;
callback.apply(null, arguments);
}
};
}
function onDrawingEvent(data){
var w = canvas.width;
var h = canvas.height;
drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
}
// make the canvas fill its parent
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
})();
</script>
</body>
</html>
私はあなたが必要と思うchec URLはwsでなければなりません：// –
URLのうちどれをチェックするか – bowman87
websocketsのURLはwsです：//テストアプリで使ってみましょうhttps://www.websocket.org/echo.html –