Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Socket.io using node.js with no express at all?

So I want to create a node.js server using socket.io, but I am more of a beginner, and find the express package rather confusing syntactically. I know that I should learn how to use express and app.js, but plan to do that after I have reached the extent of capability that node.js with only the packages http, js, and socket.io has. I looked online for almost an hour and got nothing to help my problems. The main problem that I am having with socket.io is that on the client side, the function io(); is not working. I even tried redirecting the path of the script link above the body tag to a file in the directory of my server project, but that just returned an error saying that require(); is not a function. I have included some of the files I am using (but NOT ALL of them) under this wall of text. If this is formatted incorrectly, or otherwise incorrect, please forgive me, as this is my first time using stack exchange to ask a question. For this reason, if you have enough reputation to edit this to make it more suitable to the format that you follow here, please do.

First, my server file:

const http = require('http');
const fs = require('fs');
const io = require('socket.io')(http);

function socketReq(soc){
    soc.emit("test", {"user":"test", "text":"testing da socket"});
}

io.on("connection", socketReq);

function server(req,res){
    console.log('A user tried to connect to mazeserver.localtunnel.me'+req.url)
    if(req.url == '/'){
        console.log('Sending html...');
        res.writeHead(200, {"Context-Type":"text/html"});
        fs.createReadStream('./index.html').pipe(res);
    }else if(req.url == '/pong.js'){
        console.log('Sending JS...');
        res.writeHead(200, {"Context-Type":"text/JavaScript"});
        fs.createReadStream('./pong.js').pipe(res);
    }else {
        console.log('Error 404: file .'+req.url+' not found');
        res.writeHead(404, {"Context-Type":"text/html"});
        fs.createReadStream('./404.html').pipe(res);
    }
}

http.createServer(server).listen(1337);
console.log('Server created');

And now, my main html file:

<html id='html'>
    <head>
        <title>Maze server</title>
        <center>
        <hr><br>
        <h1>Welcome to my test server!</h1>
        <br><hr>
        <p>This is some text to test</p>
        </center>
        <script type='text/JavaScript'>
            document.getElementById('html').style.hide = "true";
            document.onload = function(){
                document.getElementById('html').style.hide = "false";
            }
            var clicks = 0;
            function clickButton(){
                clicks++;
                document.getElementById('clicks').innerHTML = clicks;
            }
        </script>
    </head>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();
    </script>
    <body>
        <center>
        <button onClick='clickButton();'>Im a button</button>
        <p>You've clicked me <span id='clicks'>0</span> times. Ouch!</p>
        <br><hr>
        <p>Test canvas:</p>
        <canvas id='canvas' width='400' height='200'></canvas>
        <script src='pong.js' type='text/JavaScript'></script>
        <br>
        <br>
        <button onClick='bounce();'>Bounce!</button>
        <br>
        <button onClick='speed("x");'>Speed up X</button>
        <button onClick='speed("y");'>Speed up Y</button>
        <br>
        <button onClick='speed("x"); speed("y");'>Speed up both</button>
        <br>
        <button onClick='resetXY();'>Reset</button>
        <br><hr>
        </center>
        <p>"Copyrite" <strong><blink type='EasterEgg' mazeiness='true'>MazeOfEncryption</blink></strong> 2048. Because why the heck not.</p>
    </body>
</html>

If more files are needed, please tell me what files I should include, although I do assume that the problem is in one of these 2 files. Thanks in advance,

-Maze

like image 418
Programah Avatar asked Dec 16 '16 01:12

Programah


1 Answers

Make sure you installed socket.io by npm and have socket.io client as well. For sure you can use socket.io client on CDN:

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

For the server side, socket.io should bootstrap the app instance but not http. E.g:

var http = require('http');
var socket = require('socket.io');
function server()...
app = http.createServer(server);
io = socket(app);
app.listen(80);

By default, they use port 80 so that in client-side they just point to localhost like this var socket = io('http://localhost');. If you want to use other port, you must change in io client-side instantiation too.

var socket = io('http://localhost:1337')

like image 194
Hank Phung Avatar answered Sep 20 '22 00:09

Hank Phung