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. OD调试篇9

    渐渐地要用比较高明一点的方法去破解软件了 那好,看看今天的程序先 先载入 测试下程序 发现这是一个未注册版本的程序,注册也不让注册,注册就跳出You have rntered an invalid   ...

  2. block的语法

    主要内容: 1. 开始使用block(Getting Started with Blocks) 2. block概念综述(Conceptual Overview) 3. 声明和创建block(Decl ...

  3. bootstrap-10

    实现原理: 通过定义容器大小,平分12份(也有分为24份或32份,但12份是最常见的),在调整内外边距,最后结合媒体查询,就制作除了强大的响应式网格系统. 工作原理: 1.数据行(.row)必须包含在 ...

  4. strncpy基本用法

    见百度百科. 注意这句话: (c/c++)复制src中的内容(字符,数字.汉字....)到dest,复制多少由num的值决定,返回指向dest的指针.如果遇到null字符('\0'),且还没有到num ...

  5. 正则表达式常用用法汇总 __西科大C语言

    正则表达式,又称正规表示法.常规表示法.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列 ...

  6. 黑马程序员——JAVA基础之装饰设计模式

    ------- android培训.java培训.期待与您交流! ---------- 装饰设计模式: 当想要对已有的对象进行功能增强时,可以定义类,将已有对象传入,基于已有的功能,并提供加强功能. ...

  7. MySql数据库索引原理

    写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存储100条记录.如果没有索引,查询将 ...

  8. unity, 由scriptableObject创建.asset

    由继承自scriptableObject的类X创建.asset文件. 假设类X的定义为: [System.Serializable] public class X : ScriptableObject ...

  9. javascript中的闭包解析

    学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...

  10. Lucene/Solr搜索引擎开发笔记 - 第1章 Solr安装与部署（Jetty篇）

    一.为何开博客写<Lucene/Solr搜索引擎开发笔记> 本人毕业于2011年,2011-2014的三年时间里,在深圳前50强企业工作,从事工业控制领域的机器视觉方向,主要使用语言为C/ ...