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. mysql实现增量备份

    有点要注意 如果你误删了表 想通过这个恢复 必须恢复日志里面有创建表的日志 不然的话是无法回复的  就是必须是从你开始创建表的时候就已经记录日志了  恢复到哪个位置 就按照哪个位置来计算 mysql ...

  2. centos 6.5网卡dhcp不能获得网关

    环境:vmware +centos6.5 添加两个虚拟网卡.一个自动获取ip(用于上网-桥接) 一个手动(与主机通信用于ssh-NAT).  因为自已手动改了一下ifcfg-eth0里面的HWADDR ...

  3. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  4. 破解tumblr背景音乐

    http://sex.tumblr.com/api/read/json?callback=streampadPlayerBlogV2.getAudioResponse&type=audio&a ...

  5. UI、ID、UE和GUI，这些都是什么

    在网页和应用设计领域中,我们经常会听到人们用这些英文缩写描述设计工作,那么它们各自代表什么含义?具体的工作.方向和区别是什么呢? 下面让我们先来看看它们的英文全称和基本概念. UI(User Inte ...

  6. android使用apktool反编译出现Input file (d:\t) was not found or was not readable

    Input file (d:\t) was not found or was not readable 出现这个错误是因为apktool压缩包下载错误,我是下成首页的那个压缩包了 正确下载地址:htt ...

  7. uva 10014 Simple calculations

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  8. FE: Responsive Web Design Overview

    布局特点 1. 单列布局 vs 水平布局 手机屏幕宽度较小,因此多采用单列布局.    反观桌面网页设计,为了利用宽度,往往使用各种水平布局的组件,诸如水平导航栏,水平按钮组,水平分页等.然而水平布局 ...

  9. my dup2

    #include <fcntl.h>#include <stdio.h>#include <unistd.h> int mydup(int i_OldFd, int ...

  10. POJ-2386(深广搜基础)

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 25322   Accepted: 12759 D ...