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. git merge 和 rebase 区别

    git pull  超级不推荐使用git pull 有坑,谨慎使用,pull底层是merge git pull 是 git fetch + git merge FETCH_HEAD 的缩写.所以,默认 ...

  2. ”isEqual“ ”isEqalToString“ 和“==”三者区别

    isEqual :首先判断的时对象类型是否 一样,然后再判断具体内容是否一致:如果类型不一样,return no: isEqualToString: 直接判断字符串内容,便捷更快速,但是前提确保比较的 ...

  3. 转 C# DataTable 和List之间相互转换的方法

    一.List/IEnumerable转换到DataTable/DataView 方法一: /// <summary> /// Convert a List{T} to a DataTabl ...

  4. 2015GitWebRTC编译实录16

    新问题,看应该是视频编解码那里出问题了.找找看.WebRtc VoiceEngine codecs:ISAC/16000/1 (103)ISAC/32000/1 (104)Unexpected cod ...

  5. codeforces195c

    link:http://codeforces.com/problemset/problem/336/C 从大到小枚举,如果对应的二进制位不等于0,就加进来,最后的sum如果%2^k==0那么就是合法的 ...

  6. C++宽窄字符串转换

    首先,贴出我给出的解决方案: http://files.cnblogs.com/xuejianhui/utils.rar   再则,贴出网上最常见的例子: #include <string> ...

  7. VendorNPC.lua --随身商人

    print(">>Script: More Vendor NPC.") local NPCNAME="随身商人" --GOSSIP_ICON 菜单图 ...

  8. mysql登陆出现unknown database错误可能原因

    输入了错误命令如 # mysql -u root -p test 然后客户端会出现需要输入命令的提示,即使输入正确出现错误提示 正确命令是 # mysql -u root -p

  9. 以短链服务为例，探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  10. Spring JSR-250注解

    Java EE5中引入了“Java平台的公共注解(Common Annotations for the Java Platform)”,而且该公共注解从Java SE 6一开始就被包含其中. 2006 ...