【socket.io研究】2.小试牛刀

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.先实现这些功能再说其他的东西吧

时间: 2025-01-07 23:59:43

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

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

WebSocket出现之前,web实时推送,一般采用轮询和Comet技术(可细分为长轮询机制和流技术两种),需要大量http请求,服务器受不了.HTML5定义了WebSocket协议,基于TCP协议,由通讯协议和编程API组成,在浏览器和服务器之间建立双向连接,以基于事件的方式,赋予浏览器实时通讯的能力. 建立WebSocket连接的过程是浏览器首先发起一个http请求,在请求头中附带着“Upgrade: WebSocket”头信息,表名申请协议升级,服务器解析后产生应答信息,服务器与客户端的W

Socket.io 延伸

项目正好用到了即时通讯功能,于是研究到了webSocket技术,后来发现了可以在web.[Android].[iOS]上同时使用的解决方案,那就是SocketIO.其实现原理啥的不做介绍了,直接贴上IOS项目可能会用到的一些资源. 首先是官网:http://socket.io/这个大家都不会陌生吧~~ 1.官方推荐的Android项目:http://socket.io/blog/native-socket-io-and-android/ github上的相应地址为:https://github.

nodejs 基于socket.io实现聊天室

由于之后要做的网页视频直播项目要用到socket.io模块,所以特地花时间研究了下,参照网上的代码做了些改进,自己写了个聊天室代码.不得不承认后端事实推送能力有点厉害,这是以前我用php一直苦恼的事情.下面简单介绍下我的项目,顺带讲解下nodejs. 事实上,在看别人写的代码之前,我一直不知道nodejs是干嘛的,直到真正接触到才明白这也可以算作是服务端代码,丰富的第三方库使其功能极其强大.它可以像golang的beego一样直接通过命令行开启服务器,不过要用到express模块.加载模块的方式

socket.io实践(一.实现简单的图表推送)

引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主要为后期BI软件,CRM图标系统使用nodejs socket做铺垫.主要实现的是一个分析表图的推送. socketio.io 代码库以及官网 https://github.com/socketio/socket.io http://socket.io/ 使用redis来实现集群读写 消息 (采用订

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

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作者:潘良虎链接:https://www.zhihu.com/question/20215561/answer/26419995来源:知乎原文地址:http://www.plhwin.com/2014/05/28/nodejs-socketio/ WebSocket简介 谈到Web实时推送,就不得不说

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

前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研究起来. 首先,先看一下node.js.本小白当时还以为是一个什么js的框架或者类库.结果才知道,原来完全不是那么回事. node.js 诞生于2009年,是一种轻量级的web服务.如果查看node.js的官网,真的非常简答,简短的几行代码,就搭建了一个web服务. var http = requi

(转)使用Node.js+Socket.IO搭建WebSocket实时应用

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方式,一种是长轮询机制,一种称为流技术,这两种方式实际上是对轮询技术的改进,这些方案

socket.io与sticky-session, 多个socket.io实例带来的问题

websocket的出现使得从服务器向浏览器推送数据更加容易.但是低版本的浏览器不支持websocket,这时socket.io出现了. 使用socket.io的应用在支持websocket的浏览器运行的时候使用websocket,而在低版本的浏览器中则使用传统的方式与服务器交互(例如long-polling及其他的方式). long-polling的应用实现方式是这样的,客户端向服务器端发起请求,服务器端不会马上返回,而是保持这个连接直到服务器需要推送信息给客户端时,才返回给客户端数据.客户端

socket.io对IE8的支持

默认下载了最新版的socket.io,版本号是1.7.2,对IE8的支持不好,反正在IE8下收发消息都不行.在网上查了很多资料,都解决不了IE8的问题,崩溃. 最后用了一个大家比较认可的版本1.0.6,可以支持IE8: 卸载socket.io npm uninstall socket.io 安装1.0.6版本的socket.io npm install [email protected] 后面的一些版本没有一一的去试,下了一个1.3.7版本的,还是可以支持收发消息的,只是发现IE8在关闭窗口时,