Integration of Socket.io in Webstorm Express Project

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I create default Express Node.js project in Webstorm

How can add I Socket.io into my Project Structure in WebStorm Project Structure

I tried to add Socket.io into index.js (/routes) and chat.html (/routes) as it is written in the documentation, but I got these errors Errors

var express = require('express');

var router = express.Router();

var http = require('http').Server(express); //add 

var io = require('socket.io')(http); //add 



router.get('/chat', function(req, res) {

    res.sendFile(__dirname + '/index.html');

});



io.on('connection', function(socket){ //add

    socket.on('chat message', function(msg){

        io.emit('chat message', msg);

    });

});



module.exports = router;

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

      #messages { margin-bottom: 40px }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

      $(function () {

        var socket = io();

        $('form').submit(function(){

          socket.emit('chat message', $('#m').val());

          $('#m').val('');

          return false;

        });

        socket.on('chat message', function(msg){

          $('#messages').append($('<li>').text(msg));

          window.scrollTo(0, document.body.scrollHeight);

        });

      });

    </script>

  </body>

</html>

asked Nov 22 '18 at 20:02

Deep Dive

104

add a comment |

I create default Express Node.js project in Webstorm

How can add I Socket.io into my Project Structure in WebStorm Project Structure

I tried to add Socket.io into index.js (/routes) and chat.html (/routes) as it is written in the documentation, but I got these errors Errors

var express = require('express');

var router = express.Router();

var http = require('http').Server(express); //add 

var io = require('socket.io')(http); //add 



router.get('/chat', function(req, res) {

    res.sendFile(__dirname + '/index.html');

});



io.on('connection', function(socket){ //add

    socket.on('chat message', function(msg){

        io.emit('chat message', msg);

    });

});



module.exports = router;

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

      #messages { margin-bottom: 40px }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

      $(function () {

        var socket = io();

        $('form').submit(function(){

          socket.emit('chat message', $('#m').val());

          $('#m').val('');

          return false;

        });

        socket.on('chat message', function(msg){

          $('#messages').append($('<li>').text(msg));

          window.scrollTo(0, document.body.scrollHeight);

        });

      });

    </script>

  </body>

</html>

asked Nov 22 '18 at 20:02

Deep Dive

104

add a comment |

I create default Express Node.js project in Webstorm

How can add I Socket.io into my Project Structure in WebStorm Project Structure

I tried to add Socket.io into index.js (/routes) and chat.html (/routes) as it is written in the documentation, but I got these errors Errors

var express = require('express');

var router = express.Router();

var http = require('http').Server(express); //add 

var io = require('socket.io')(http); //add 



router.get('/chat', function(req, res) {

    res.sendFile(__dirname + '/index.html');

});



io.on('connection', function(socket){ //add

    socket.on('chat message', function(msg){

        io.emit('chat message', msg);

    });

});



module.exports = router;

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

      #messages { margin-bottom: 40px }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

      $(function () {

        var socket = io();

        $('form').submit(function(){

          socket.emit('chat message', $('#m').val());

          $('#m').val('');

          return false;

        });

        socket.on('chat message', function(msg){

          $('#messages').append($('<li>').text(msg));

          window.scrollTo(0, document.body.scrollHeight);

        });

      });

    </script>

  </body>

</html>

asked Nov 22 '18 at 20:02

Deep Dive

104

I create default Express Node.js project in Webstorm

How can add I Socket.io into my Project Structure in WebStorm Project Structure

I tried to add Socket.io into index.js (/routes) and chat.html (/routes) as it is written in the documentation, but I got these errors Errors

var express = require('express');

var router = express.Router();

var http = require('http').Server(express); //add 

var io = require('socket.io')(http); //add 



router.get('/chat', function(req, res) {

    res.sendFile(__dirname + '/index.html');

});



io.on('connection', function(socket){ //add

    socket.on('chat message', function(msg){

        io.emit('chat message', msg);

    });

});



module.exports = router;

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

      #messages { margin-bottom: 40px }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

      $(function () {

        var socket = io();

        $('form').submit(function(){

          socket.emit('chat message', $('#m').val());

          $('#m').val('');

          return false;

        });

        socket.on('chat message', function(msg){

          $('#messages').append($('<li>').text(msg));

          window.scrollTo(0, document.body.scrollHeight);

        });

      });

    </script>

  </body>

</html>

var express = require('express');

var router = express.Router();

var http = require('http').Server(express); //add 

var io = require('socket.io')(http); //add 



router.get('/chat', function(req, res) {

    res.sendFile(__dirname + '/index.html');

});



io.on('connection', function(socket){ //add

    socket.on('chat message', function(msg){

        io.emit('chat message', msg);

    });

});



module.exports = router;

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

      #messages { margin-bottom: 40px }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

      $(function () {

        var socket = io();

        $('form').submit(function(){

          socket.emit('chat message', $('#m').val());

          $('#m').val('');

          return false;

        });

        socket.on('chat message', function(msg){

          $('#messages').append($('<li>').text(msg));

          window.scrollTo(0, document.body.scrollHeight);

        });

      });

    </script>

  </body>

</html>

var express = require('express');

var router = express.Router();

var http = require('http').Server(express); //add 

var io = require('socket.io')(http); //add 



router.get('/chat', function(req, res) {

    res.sendFile(__dirname + '/index.html');

});



io.on('connection', function(socket){ //add

    socket.on('chat message', function(msg){

        io.emit('chat message', msg);

    });

});



module.exports = router;

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

      #messages { margin-bottom: 40px }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

      $(function () {

        var socket = io();

        $('form').submit(function(){

          socket.emit('chat message', $('#m').val());

          $('#m').val('');

          return false;

        });

        socket.on('chat message', function(msg){

          $('#messages').append($('<li>').text(msg));

          window.scrollTo(0, document.body.scrollHeight);

        });

      });

    </script>

  </body>

</html>

node.js express socket.io

asked Nov 22 '18 at 20:02

Deep Dive

104

asked Nov 22 '18 at 20:02

Deep Dive

104

asked Nov 22 '18 at 20:02

Deep Dive

104

asked Nov 22 '18 at 20:02

Deep Dive

104

asked Nov 22 '18 at 20:02

Deep Dive

104

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437416%2fintegration-of-socket-io-in-webstorm-express-project%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky