javascript代码实例教程-NodeJS+Express+Socket.io的一个简单例子

发布时间:2019-01-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-NodeJS+Express+Socket.io的一个简单例子脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 2.初始化一个NodeJS web应用:

 

打开CMD窗口。

 

运行cmd:“mkdir myapp”,新建一个文件夹,名为myapp。

 

运行cmd:“cd myapp”,切换到文件夹myapp。

 

运行cmd:“npm inIT”,创建文件package.json。

 

 

 

3.ExPress入门应用:

 

在上面的CMD窗口运行cmd:“npm install exPRess --save”, 安装“express” node_module, "--save"表示保存express到package.json。

 

添加文件app.js到myapp文件夹,假设package.json里面的main是app.js。

 

复制代码

//app.js

 

VAR app = require('express')();

var http = require('http').Server(app);

 

app.get('/', function(req, res){

  res.send('<h1>Hello world</h1>');

});

 

http.listen(3000, function(){

  console.LOG('listening on *:3000');

});

复制代码

运行cmd:“node app”,启动myapp。

 

在Chrome里打开“https://localhost:3000/”,显示“Hello world”。

 

在CMD窗口里输入“Ctrl+C”,可终止myapp的运行。

 

 

 

4.Socket.io入门应用

 

在上面的CMD窗口运行:“npm install --save socket.io”。

 

添加index.htML到myapp文件夹,内容如下:

 

复制代码

<!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; }

    </style>

  </head>

    

  <body>  

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

    <form action="">

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

    </form>

      

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

    <script src="https://code.jquery.COM/jquery-1.11.1.js"></script>

    <script>

      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));

      });

    </script>

  </body>

</html>

复制代码

修改app.js如下:

 

复制代码

//app.js

 

var app = require('express')();

var http = require('http').Server(app);

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

var path = require('path');

 

app.get('/', function(req, res){

  res.sendfile(path.join(__dirname, 'index.html'));

});

 

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

  console.log('a user connected');

 

  socket.on('disconnect', function(){

    console.log('user disconnected');

  });

    

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

    console.log('message: ' + msg);

 

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

  });

 

});

 

app.set('port', process.env.PORT || 3000);

 

var server = http.listen(app.get('port'), function() {

  console.log('start at port:' + server.address().port);

});

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-NodeJS+Express+Socket.io的一个简单例子全部内容,希望文章能够帮你解决javascript代码实例教程-NodeJS+Express+Socket.io的一个简单例子所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。