Websocket chat error in node.js socket.io

Question

Welcome all! I have made a chat with websocket, the best of all is that it includes php, for this I installed this websocket (server side), in a different way.

The problem is the following, when I run the server, and I open the page from localhost/path .. there is an error in the browser,

"Uncaught ReferenceError: io is not defined" at: "var socket = io();" from index.php, chat1.rar file

The server side appears to work, node chat.js

I've been watching for a week how to fix it,

I leave below the mentioned code.

chat.js (server side)

var express = require( 'express' );
var http = require('http');
var socket = require('socket.io');
var bodyParser = require('body-parser')
var PORT = process.env.PORT || 8080;
var fs= require('fs');
var app = express();
var server = http.createServer( app );
var io = socket.listen( server );

io.on('connection',function(socket){
    var channel = 'channel-a';

    socket.join(channel);
    socket.on('message',function(msj){
        io.sockets.in(channel).emit('message',msj,socket.id);
    });
    socket.on('disconnect',function(){
        console.log("Desconectado : %s",socket.id);
    });

});
server.listen( 1334, function() {
    console.log('lisning to port 1334');
});

And index.php (client side)

<!DOCTYPE html>
<html lang="en">
<head>

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
</head>
<body>
    <div class="container">

    <script type="text/javascript">
     var socket = io.connect( 'http://localhost:1334' );
        var socket = io();
        $(function(){
            $("form").submit(function(){
                var mensaje = $("#msg").val();
                if(mensaje=='') return false;
                if(mensaje==' ') return false;
                socket.emit('message',mensaje);
                $("#msg").val('').focus();
                return false;
            });
        });
        socket.on('message',function(msg,id){
            //output.innerHTML += '<p><strong>' + id + ': </strong>' + msg + '</p>';
            $('#message').append($('<p><strong>' + id + ': </strong>' + msg + '</p>'));
            //$('#message').append($('<div class="msg new-chat-message">').text(id+': '+msg));
            //$('#message').append($('<div class="msg new-chat-message">').html('<span class="member-name">' + id + '</span>: ' + msg));
            $('.chat-window').scrollTop($('#message').height());
            //$("#message").append($('<li>').text(id+' : ' +msg));
        });
        socket.on('change channel',function(channel){
            $("#message").html('').append($('<li>').text('system : Bienvenido al Canal '+channel+' !'));
        });
    </script>

    <div class="col-md-12">
        <div class="chat-window">
              <div id="message"></div>
    </div>
    <div id="controls">
        <form action="">
            <select name="channel" id="channel">
                <option value="channel-a">Channel A</option>
            </select>

            <div class="col-md-12">
                <div class="input-group enter-chat-message">
                    <input type="text" id="msg" class="form-control" placeholder="Chat Message...">
                    <input class="input-group-addon submit-chat-message" type="submit" id="btn" value="Enviar">
                </div>
            </div>
</div></div>
        </form>
    </div></div></div></div>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
            <script src="js/bootstrap.js"></script>
            <script src="node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
</body>
</html>

screenshot: http://prntscr.com/ie030c

Any Help is Appreciated! Thanks

CodeLover · Accepted Answer · 2018-02-13 07:31:06Z

1

Change this:

<script src="node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js">

To:

<script src="/socket.io/socket.io.js">

And see what happens.

answered Feb 13, 2018 at 7:31

CodeLover

5692 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sebastian Hanania Over a year ago

thanks, but the first script it is correct, i think the problem is: prntscr.com/idzvae (right side)

CodeLover Over a year ago

Include <script src="/socket.io/socket.io.js"> before your implementation

Sebastian Hanania Over a year ago

I updated the post, I realized if I take off socket.io.js, there is a loop in user connected prntscr.com/ie03xz, but when I put socket.io.js, appears the image in the updated post. and the <script src = "/ socket.io/socket.io.js"> in my directory does not exist, so I use a local file

CodeLover Over a year ago

Is your http web server running on port 1334?

CodeLover Over a year ago

Can you post your code written inside nodeClient.js?

|

Collectives™ on Stack Overflow

Websocket chat error in node.js socket.io

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related