1.建立个项目，也就是文件夹，这里使用testsocket

2.创建文件package.json，用于描述项目：

{

    "name":"testsocket",

    "version":"0.0.1",

    "description":"my first nodejs app",

    "dependencies":{

        "express":"~4.10.2",,

        "socket.io":"~1.2.0"

    }

}

3.创建index.js

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

//Express初始化变量app，作为方法应用于http服务

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

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

//定义一个路由方法'/'用作我们访问网站首页的返回结果

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

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

    console.log('new link:', req);

});

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

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

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

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

    });

});

//监听服务器3000端口

http.listen(3000, function(){

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

});

4.创建index.html

<!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="https://cdn.socket.io/socket.io-1.2.0.js"></script>

    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

    <script>

      var myid = Math.floor(Math.random() * 100) + 1;

      var socket = io('/'); 

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

        socket.emit('chat message', myid + ' says: ' + $('#m').val());

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

        return false;

      }); 

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

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

      }); 

    </script>

  </body>

</html>

5.执行

安装：

npm install –save express

npm install –save socket.io

node index.js

浏览器中访问127.0.0.1:3000

6.先实现这些功能再说其他的东西吧

demo下载地址：http://files.cnblogs.com/files/renyuzhuo/testsocket.zip

【socket.io研究】2.小试牛刀的更多相关文章

  1. 【socket.io研究】3.手机网页间聊天核心问题

    前面我们已经说了服务器相关的一些内容,且又根据官网给出的一个例子写了一个可以聊天的小程序,但是这还远远不够呀,这只能算是应用前的准备工作.接下来,一起来考虑完善一个小的聊天程序吧. 首先,修改服务器的 ...

  2. 【socket.io研究】1.官网的一些相关说明，概述

    socket.io是什么? 官网的解释是一个实时的,基于事件的通讯框架,可以再各个平台上运行,关注于效率和速度. 在javascript,ios,android,java中都实现了,可以很好的实现实时 ...

  3. 【socket.io研究】0.前提准备

    WebSocket出现之前,web实时推送,一般采用轮询和Comet技术(可细分为长轮询机制和流技术两种),需要大量http请求,服务器受不了.HTML5定义了WebSocket协议,基于TCP协议, ...

  4. 在web浏览器上显示室内温度（nodeJs+arduino+socket.io）

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  5. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  6. socket.io简单入门(一.实现简单的图表推送）

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

  7. （转）使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  8. node.js + socket.io实现聊天室一

    前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...

  9. Node.js 和Socket.IO 实现chat WEBIM

    socket官方:   http://socket.io/  需求:实现WEB IM功能,数据从服务器PUSH  不是PULL  websocket是基于HTML5的新特性,不兼容IE6,7,8 .. ...

随机推荐

  1. 你好，C++（25）函数调用和它背后的故事5.1.2 函数调用机制

    5.1.2  函数调用机制 在前面的学习中,我们多次提到了“调用函数”的概念.所谓调用函数,就是将程序的执行控制权从调用者(某个函数)交给被调用的函数,同时通过参数向被调用的函数传递数据,然后程序进入 ...

  2. MetInfo操作笔记

    1.去版权(前台) 文件路径:templates/模板名称/foot.php <div class="powered_by_metinfo">Powered by &l ...

  3. JS之对象数组遍历？

    一.js实现遍历对象 <script> ","destroy":"97%"}; var props = ""; for ...

  4. 关于ASP.NET MVC中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据.   从控制器到视图 ...

  5. C++中复制构造函数与重载赋值操作符

    我们都知道,在C++中建立一个类,这个类中肯定会包括构造函数.析构函数.复制构造函数和重载赋值操作:即使在你没有明确定义的情况下,编译器也会给你生成这样的四个函数.例如以下类:   class CTe ...

  6. PreparedStatement執行sql語句

    import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import org ...

  7. 如何访问google

    http://www.williamlong.info/archives/3983.html http://jingyan.baidu.com/article/29697b91316f2fab20de ...

  8. Hive是什么！

    Hive是什么! 一直想抽个时间整理下最近的所学,断断续续接触hive也有半个多月了,大体上了解了很多Hive相关的知识.那么,一般对陌生事物的认知都会经历下面几个阶段: 为什么会出现?解决了什么问题 ...

  9. Java中关于String的split(String regex, int limit) 方法

    今天在对一个String对象进行拆分的时候,总是无法到达预计的结果.呈现数据的时候出现异常,后来debug之后才发现,错误出在String spilt上,于是开始好好研究下这东西,开始对api里的sp ...

  10. Javascript OrderBy

    要在js 实现orderBy基本知识就是 array.sortarray.sort(function(a,b){ a 表示 row 0 b 表示 row 1 它会loop多次你可以比较 if(a &g ...