soket.io & web

http://socket.io/get-started/chat/

  • 新建一個文件夾 soketWeb ;
  • 在sokertWeb 文件夾內新建一個 package.json 文件；內容如下：
{

  "name": "socketWebExample",

  "version": "0.0.1",

  "description": "it is my first app",

  "dependencies": {

    "socket.io": "^1.3.5"

  }

}
  • 在控制檯中 進到soketWeb 文件夾中 安裝依賴
npm install --save express@4.10.2
  • 新建一個index.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');

});
  • 在控制檯中 啟動服務器；運行命令
node index.js
  • 在瀏覽器中輸入 http://localhost:3000/ 將看到hello world; 表示運行成功；
  • 修改index.js 的代碼，添加如下：
app.get('/',function (req,res) {

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

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

});
  • 新建一個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>

  </body>

</html>
  • 在控制檯中 進到soketWeb 文件夾中 安裝依賴
 npm install --save socket.io
  • 再修改index.js 內容如下：
var app=require('express')();

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

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

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

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

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

});

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

    console.log('has a user connected');

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

    console.log('user disconnected');

  });

});

http.listen(3000,function(){

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

});
  • 在index.html 中添加一下的代碼：
    <script>

    var socket = io();

  </script>
  • 再一次在瀏覽器中運行 http://localhost:3000/ 如圖；

    好 連接成功！！！
  • 又一次修改 index.html 向服務器 發送消息；
<script>

  var socket = io();

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

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

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

    return false;

  });

</script>
  • 修改index.js 服務器這邊的接收到信息後處理；
io.on('connection',function(socket){

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

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

  });

});

OK 到這裏就差不多了 ；

可以開始通話了；

  • 再修改index.js 廣播接收到的信息；
var app=require('express')();

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

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

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

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

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

});

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

    console.log('has a user connected');

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

        console.log('user disconnected');

      });

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

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

  });

});

http.listen(3000,function(){

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

});
  • 在index.html 中修改 當接收到信息時 ，添加到聊天記錄裏面 顯示處理；
    <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>

node socket.io web的更多相关文章

  1. Node学习笔记（三）：基于socket.io web版你画我猜（二）

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  2. Socket IO Web实时推送

    1服务器pom.xml引入 <!-- 服务端 --> <dependency> <groupId>com.corundumstudio.socketio</g ...

  3. Load Testing Socket.IO Web Applications and Infrastructure

    转自:https://medium.com/better-programming/load-testing-socket-io-web-applications-and-infrastructure- ...

  4. Node学习笔记（三）：基于socket.io web版你画我猜（一）

    经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...

  5. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

  6. 使用Node.js的socket.io模块开发实时web程序

    首发:个人博客,更新&纠错&回复 今天的思维漫游如下:从.net的windows程序开发,摸到nodejs的桌面程序开发,又熟悉了一下nodejs,对“异步”的理解有了上上周对操作系统 ...

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

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

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

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

  9. [Node.js] 基于Socket.IO 的私聊

    原文地址:http://www.moye.me/2015/01/02/node_socket-io/ 引子 最近听到这么一个问题:Socket.IO 怎么实现私聊?换个提法:怎么定位到人(端),或者说 ...

随机推荐

  1. Android图片加载与缓存开源框架：Android Glide

    <Android图片加载与缓存开源框架:Android Glide> Android Glide是一个开源的图片加载和缓存处理的第三方框架.和Android的Picasso库类似,个人感觉 ...

  2. DOM扩展之Selectors API

    jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementsByTagName(). Selectors API致力于让浏览器 ...

  3. css3简单介绍

    关于css3我先介绍几个简单的选择器: 先进行设置: 字符串匹配属性选择器: E[alt^="a"]  选择属性中以a开头的元素: E[alt$="a"]  选 ...

  4. UML学习笔记1

    UML概述:是一种为面向对象软件设计提供的建模语言. 构成:事物things关系relationshs图diagrams UML事物:构件事物 行为事物 分组事物 注释事物 UML关系:依赖depen ...

  5. Unit Tests

    The Three Laws of TDD First Law : you may not write production code until you have written a failing ...

  6. matlab使用

    1.nargin 在matlab中定义一个函数时, 在函数体内部, nargin是用来判断输入变量个数的函数. 2.assert “断言”,“坚持自己的主张”.判断函数. http://www.cnb ...

  7. cocos2d/x 自带字体（label）

    CCLabelTTF* label1 = CCLabelTTF::labelWithString("1掼蛋as", "AppleGothic", 15); la ...

  8. Qt控件篇 ---- QTableView/QTableWidget

    记录 //按字母排序 item->setText("2"); //按数值排序item->setData(Qt::DisplayRole, 2);

  9. PAT (Basic Level) Practise：1018. 锤子剪刀布

    [题目链接] 大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第1行 ...

  10. Sqlserver数据库总结

    由于公司项目需要这段时间一直在做有关于数据库方面的工作.趁这段时间有空,对数据库方面的知识进行一个梳理和归纳,以便以后需要时,查看起来方便. 使用的数据库主要有ORACLE10g和Sqlserver2 ...