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. 《final修饰基本类型变量和引用类型变量的区别》

    //final修饰基本类型变量和引用类型变量的区别 import java.util.Arrays; class Person { private int age; public Person(){} ...

  2. Linux type命令

    用途说明 type命令用来显示指定命令的类型.一个命令的类型可以是如下几种: alias 别名 keyword 关键字,Shell保留字 function 函数,Shell函数 builtin 内建命 ...

  3. B-Tree算法分析与实现

    在数据库系统中,或者说在文件系统中,针对存储在磁盘上的数据读取和在内存中是有非常大的区别的,因为内存针对任意在其中的数据是随机访问的,然而从磁盘中读取数据是需要通过机械的方式来读取一个block,不能 ...

  4. Error:Execution failed for task ':app:transformClassesWithInstantRunForDebug'. > java.lang.ClassNotFoundException: io.realm.RealmObject

    这问题错误是在运行时出现的,A-Jiang大神有说明解决方法,大神网址:https://github.com/AndroidJiang/StockChart 如果是as2.0+,可能会出现instan ...

  5. Struts2 Action中的方法命名不要以get开头

    偶然发现,在调用一个action中的某个方法时,会自动调用另一个无关的方法,找了好久,最后发现是方法命名的问题,方法命名以get开头,action会自动调用!所以,以后再写action中的方法时尽量不 ...

  6. CSS 知识点

    1:display:block:比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,因为a标签没有结构,就是没有宽高, ...

  7. js中逻辑为false的8种情况

    如果对象无初始值或者其值为 0.-0.null."".false.undefined 或者 NaN,那么对象的逻辑值为 false. typeof 返回的是字符串,有六种可能:&q ...

  8. Windows xp IIS显示403错误解决方案

    XP的IIS很烦人,很多限制. 最近一客户用XP安装IIS,总提示:403.9 错误 连接的用户过多 解决方案: 1)安装IIS配置工具 下载地址:http://download.microsoft. ...

  9. myeclipse的debug模式中breakpoint窗口怎么调出来

    myeclipse的debug模式中breakpoint窗口怎么调出来? 解决办法: window-->show view-->breakpoints.   如下:

  10. 子类实例化和Super

    在子类的构造函数当中,必须调用父类的构造函数,通过super的参数个数和类型来决定调用父类哪一个构造函数. class Student extends Person{ Student(){ super ...