node.js - Socket.IO connection polling saying error 404 not found -
am working whiteboard drawing canvas found in link below. https://socket.io/demos/whiteboard/
i have followed setup requirements when run application, having error below console
failed load resource: server responded status of 404 (not found) socket.io.js:1 http://localhost/socket.io/?eio=3&transport=polling&t=1505327119965-1 404 (not found) i.create @ socket.io.js:1 @ 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 http://localhost/socket.io/?eio=3&transport=polling&t=1505327122954-2 404 (not found) it seems socket.io not getting response listner. please can me fix issue.
here 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)); here 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); (var = 0; < 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 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 canvas fill parent function onresize() { canvas.width = window.innerwidth; canvas.height = window.innerheight; } })(); </script> </body> </html>
i think problem how set server, please try setting way:
const http = require('http'); const express = require('express'); const socketio = require('socket.io'); var app = express(); var server = http.createserver(app); var io = socketio(server); app.use(express.static(__dirname + '/public')); const port = process.env.port || 3000; // add socketio code here server.listen(port, () => { console.log(`server on port ${port}!`); });
Comments
Post a Comment