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. HDU 5358 尺取法+枚举

    题意:给一个数列,按如下公式求和. 分析:场上做的时候,傻傻以为是线段树,也没想出题者为啥出log2,就是S(i,j) 的二进制表示的位数.只能说我做题依旧太死板,让求和就按规矩求和,多考虑一下就能发 ...

  2. Node.js高级编程读书笔记 - 4 构建Web应用程序

    Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...

  3. CentOS 6.6 中中文输入法设置

    排版比较乱你,参见 https://www.zybuluo.com/Jpz/note/144597 Linux开发环境配置 安装完系统之后,我们需要设置中文输入法,中文输入法是系统自带的,设置步骤如下 ...

  4. 移动开发框架，Hammer.js&nbsp;移动设备触摸手势js库

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.t ...

  5. yum info 查不到nginx下载info的问题

    如果查看nginx信息提示nginx找不到,那么可以通过修改rpm源来进行后续步骤,执行命令:rpm -ivh http://nginx.org/packages/centos/6/noarch/RP ...

  6. 如何做好APP测试？

    测试一个App具体包括哪些方面,以及每个方面有什么关键点呢? 测试人员常被看作bug寻找者,但你曾想过他们实际是如何开展测试的吗? 你是否好奇他们究竟都做些什么,以及他们如何在一个典型的技术项目中体现 ...

  7. java空指针异常 for循环时，使用了值为null的变量

    错误代码: for(Map<String,Object> videoItemMap:learnVideoList){ String videoStuId=MapUtils.getStrin ...

  8. knockout 学习实例3 html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Unity3D外包

    北京动点软件长年承接Unity3D(U3D外包)项目,我们制作各类型VR/AR游戏,虚拟现实,增强现实项目! 品质保证,售后完备. 联系请加QQ:372900288  电话:13911652504 我 ...

  10. python学习-day15：函数作用域、匿名函数、函数式编程、map、filter、reduce函数、内置函数r

    ---恢复内容开始--- 一.全局变量与局部变量 在子程序中定义的变量称为局部变量, 在程序的一开始定义的变量称为全局变量. 全局变量作用域是整个程序,局部变量作用域是定义该变量的子程序.当全局变量与 ...