在这个例子中，其实node.js并没有真正起到服务器的作用，因为我们这里可以直接运行client.html文件，而不用输入url请求，当 然，要想输入url请求页面内容还需要加入请求静态文件的代码。这个实例中node.js最重要的作用就是将服务端迁移到了js，实现了客户端和服务端语 言上的统一，我们只要在浏览器上同时运行两个client.html客户端页面，即可进行简单的即是通讯了，socket.io才是我们真正用来实现即时 通讯的消息的收发。

var server = http.createServer(callback);//开启http服务

var io = require("socket.io").listen(server);//socketio来监听http服务器

接下来直接上客户端代码client.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>socketIO - Simple chat</title>
  6.         <script src="./socketio.js"></script>
  7.         <style>
  8.             * { font-family:tahoma; font-size:12px; padding:0px; margin:0px; }
  9.             p { line-height:18px; }
  10.             div { }
  11.             .textInput{width:500px;margin:  auto;margin-top: 50px;}
  12.             #content { padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll;
  13.                 border:1px solid #CCC; height: 160px;width: 400px;float: left;}
  14.             #input { border-radius:2px; border:1px solid #ccc;
  15.                 margin-top:10px; padding:5px; width:400px;  }
  16.             #status { width:88px; display:block; float:left; margin-top:15px; }
  17.             .onlineList {
  18.                 width: 200px;
  19.                 height: 160px;
  20.                 background-color: #ccc;
  21.                 border: 1px solid #DDD;
  22.                 margin-top: 50px;
  23.                 margin-left: 420px;
  24.             }
  25.             li {
  26.                 display: inline;border: 1px solid red;
  27.             }
  28.             .ul {
  29.                 margin-left:auto; margin-right:auto;
  30.                 width: 600px;
  31.  
  32.             }
  33.         </style>
  34.     </head>
  35.     <script type="text/javascript">
  36.         //window.onbeforeunload = disConnect;
  37.     </script>
  38.     <body>
  39.         <div class="ul">
  40.             <div id="content"></div>
  41.             <div class="onlineList">
  42.                 当前在线：
  43.                 <div id="list">
  44.  
  45.                 </div>
  46.             </div>
  47.  
  48.         </div>
  49.  
  50.         <div class="textInput">
  51.             <span id="status">connecting</span>
  52.             <input type="text" id="input" value="只能选择右上列表上的姓名进行登录"/>
  53.         </div>
  54.  
  55.         <script src="./jquery.js"></script>
  56.         <script src="./client.js"></script>
  57.     </body>
  58. </html>

对应的client.js文件

  1.     "use strict";
  2.  
  3.     // for better performance - to avoid searching in DOM
  4.     var content = $('#content');
  5.     var input = $('#input');
  6.     var statusObj = $('#status');
  7.     var userList = $("#list");
  8.  
  9.     // my color assigned by the server
  10.     var myColor = false;
  11.     // my name sent to the server
  12.     var myName = false;
  13.     var connection = null;
  14.     var currentToUser = null;
  15.     connect();
  16.     window.onbeforeunload = beforeDisConnect;//监听浏览器关闭前的事件
  17.     window.onunload = disConnect;//监听浏览器关闭时
  18.  
  19.     /**
  20.      * Send mesage when user presses Enter key
  21.      */
  22.     input.keydown(function (e) {
  23.         if (e.keyCode === ) {
  24.             var msg = $(this).val();
  25.             if (!msg) {
  26.                 return;
  27.             }
  28.             if (!myName) {
  29.                 myName = msg;//定义名字
  30.                 statusObj.text(myName);
  31.                 input.val("");
  32.  
  33.                 if (connection) {
  34.                     connection.json.send({ logicId: "login", username: myName });
  35.                 }
  36.                 return;
  37.             }
  38.             var time = new Date();
  39.             var tmpTime = time.getFullYear() + "-" + ((time.getMonth() <  ? "" : "") + (time.getMonth() + )) + "-" + ((time.getDate() <  ? "" : "") + time.getDate()) + " "
  40.                     + ((time.getHours() <  ? "" : "") + time.getHours()) + ":" + ((time.getMinutes() <  ? "" : "") + time.getMinutes()) + ":" + ((time.getSeconds() <  ? "" : "") + time.getSeconds());
  41.             // send the message as an ordinary text
  42.             msg = { "@class": "test.EntityIn", logicId: "chat", username: myName, msg: input.val(),
  43.             to:currentToUser,time:tmpTime};
  44.  
  45.             //alert(typeof(object));
  46.             connection.json.send(msg);
  47.             $(this).val('');
  48.             // disable the input field to make the user wait until server
  49.             // sends back response
  50.  
  51.         }
  52.     });
  53.  
  54.     /**
  55.      * Add message to the chat window
  56.      */
  57.     function addMessage(author, message, dt) {
  58.         content.prepend('<p><span>' + author + '</span> @ '+dt+ ': ' + message + '</p>');
  59.     }
  60.  
  61. function connect() {
  62.     // open connection
  63.     connection = io.connect('http://127.0.0.1:1337', { 'reconnect': false });
  64.     connection.on('connect', function (data) {
  65.         // first we want users to enter their names
  66.         input.removeAttr('disabled');
  67.         statusObj.text('登录:');
  68.         connection.send();
  69.     });
  70.  
  71.     connection.on("error", function (error) {
  72.         // just in there were some problems with conenction...
  73.         content.html($('<p>', {
  74.             text: 'Sorry, but there\'s some problem with your '
  75.                 + 'connection or the server is down.'
  76.         }));
  77.     });
  78.  
  79.     // most important part - incoming messages
  80.     connection.on("message", function (message) {
  81.         var logicId = message.logicId;
  82.         if (logicId == 'conn_success') {//连接成功
  83.             var users = message.users;
  84.             for (var i = ; i < users.length; i++) {
  85.                 userList.append('<a href="#" onclick="chatToSb(this.innerHTML)">'+users[i]+'</a></br>');
  86.             }
  87.         } else if (logicId == "chat") {
  88.             addMessage(message.from,message.msg,message.time);
  89.         }else if(logicId == "history"){
  90.             var historyMsgs = message.historyMsgs;
  91.             for(var i = ; i < historyMsgs.length; i++){
  92.                 addMessage(historyMsgs[i].from,historyMsgs[i].msg,historyMsgs[i].time);
  93.             }
  94.         }
  95.  
  96.     });
  97. }
  98.  
  99. function chatToSb(username) {
  100.     currentToUser = username;
  101. }
  102.  
  103. function disConnect(){
  104.     connection.disconnect();
  105.     //alert("断开连接");
  106.  
  107. }
  108.  
  109. function beforeDisConnect() {
  110.     return "确认离开";
  111. }

接下来就是重头戏的服务端了server.js

  1.     "use strict";  
  2.  
  3.     var http = require('http');  
  4.  
  5.     /**
  6.      * Global variables
  7.      */
  8.     var history = [];
  9.     // list of currently connected clients (users)
  10.     var users = ["user1","user2"];
  11.     var clients = [];  
  12.  
  13.     /**
  14.      * HTTP server
  15.      */
  16.     var server = http.createServer(function (request, response) {
  17.         // Not important for us. We're writing socket.io server, not HTTP server
  18.     });
  19.     server.listen();  
  20.  
  21.     /**
  22.      * socketio server
  23.      */
  24.     var io = require("socket.io").listen(server);  
  25.  
  26.     //io监听socket事件
  27.     io.on('connection', function (connection) {
  28.         console.log((new Date()) + ' Connection from origin ' + connection.id + '.');
  29.         var json = { logicId:"conn_success",users: users };
  30.         connection.json.send(json);
  31.         var userName = false;  
  32.  
  33.         console.log((new Date()) + ' Connection accepted.');  
  34.  
  35.         connection.on('message', function (message) {
  36.             console.log(message);
  37.             if (message.logicId == "login") {
  38.                 clients[message.username] = connection; //将用户名与连接对应
  39.                 connection.username = message.username;
  40.             }else if(message.logicId == "chat") {//用户发起会话
  41.                 //1、查找该用户是否有历史消息
  42.                 var toUser = message.to;//会话目标
  43.                 var from = message.username;//会话发起人
  44.                 if(history[toUser]&&history[toUser][from]){
  45.                     var historyMsgs = [];
  46.                     for (var i = ; i < history[toUser][from].length; i++) {
  47.                         historyMsgs.push(history[toUser][from][i]);
  48.                     };
  49.                     connection.json.send({logicId:"history",historyMsgs:historyMsgs});
  50.                 }
  51.                 //2、检查目标用户是否在线，若在线，转发用户请求,否则，存为历史会话中
  52.                 var objConnect = clients[toUser];
  53.                 var chatJson = {logicId:"chat", from: from, time: message.time, msg: message.msg };
  54.                     connection.json.send(chatJson);
  55.                 if (objConnect) {
  56.                     objConnect.json.send(chatJson);
  57.                 } else {//存储于历史会话中
  58.                     if (!history[from]||!history[from][toUser]) {
  59.                         if (!history[from]) {
  60.                             history[from] = [];
  61.                         }
  62.                         history[from][toUser] = [];
  63.                     }
  64.                     history[from][toUser].push(chatJson);
  65.                 }
  66.             }
  67.         });  
  68.  
  69.         // user disconnected
  70.         connection.on('disconnect', function (socket) {
  71.             console.log("关闭连接:" + socket);
  72.             delete clients[connection.username];//删除用户的连接  
  73.  
  74.         });  
  75.  
  76.     });

这里都假设大家是在win7的环境下，并且装了node.js，方便调试的话还可以安装node-inspector调试工具，或者用 webStorm IDE，具体的可以参看我的前一篇博文，除了这三个文件当然还需要服务端和客户端的socket.io文件，node.js就是下载第三方包的方式了，客 户端的socket.io文件网上可以找到的。

接下来简单介绍一下以上代码实现的功能以及用法，打开页面后首先就是登录，由于例子比较简单，并没有单独的登录页面，直接在文本框中输入用户名，注 意（这里的用户名只能是user1或者user2，读者可以在server.js的users添加自己需要的用户名，这里其实是固定的），然后回车，就是 登录了，然后输入需要发送的信息，并且点击接受者的用户名，否则会接收者是空的，关闭页面的时候，我们会监听页面关闭事件，给服务端发送 disconnect事件，删除当前用户名的连接。根据这个流程，代码其实很简单，就不再详解了。

转载：http://blog.csdn.net/jiangcs520/article/details/11173749

node.js和socket.io纯js实现的即时通讯实例分享的更多相关文章

  1. Node.js 和Socket.IO 实现chat WEBIM

    socket官方:   http://socket.io/  需求:实现WEB IM功能,数据从服务器PUSH  不是PULL  websocket是基于HTML5的新特性,不兼容IE6,7,8 .. ...

  2. socket.io+angular.js+express.js做个聊天应用(三)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  3. Node+Express+MongoDB + Socket.io搭建实时聊天应用

    Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...

  4. Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建

    前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...

  5. Node+Express+MongoDB+Socket.io搭建实时聊天应用实战教程(一)--MongoDB入门

    前言 本文并不是网上流传的多少天学会MongoDB那种全面的教程,而意在总结这几天使用MongoDB的心得,给出一个完整的Node+Express+MongoDB+Socket.io搭建实时聊天应用实 ...

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

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

  7. node.js和socket.io实现im

    im——Instant Messaging 即时通讯 基本技术原理 (1)通过IM服务器登陆或注销 (2)用户A通过列表找到B,用户B获得消息并与之交谈 (3)通过IM服务器指引建立与B单独的通讯通道 ...

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

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

  9. socket.io+angular.js+express.js做个聊天应用(四)

    接着上一篇 使用angularjs构建聊天室的client <!doctype html> <html ng-app="justChatting"> < ...

随机推荐

  1. Inversions

    There are N integers (1<=N<=65537) A1, A2,.. AN (0<=Ai<=10^9). You need to find amount o ...

  2. jQery无缝滚动效果

    思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...

  3. Android小项目之十一 应用程序的主界面

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...

  4. cent os 6 安装 nginx

    cent os 6 默认的库是没有nginx的,所以直接 yum install nginx不行. 解决办法: $ wget http://nginx.org/packages/centos/6/no ...

  5. ASP.NET后台注册JS的方法

    1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("hel ...

  6. node.js Web应用框架Express.js（一）

    什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随 ...

  7. cordova发送邮件插件：ngcordova plugin-Email Composer

    这是ngcordova里边的一个发送邮件的插件,具体的使用方法为: (参考文档:http://ngcordova.com/docs/plugins/emailComposer/) 1.首先下载插件: ...

  8. 怒刷DP之 HDU 1260

    Tickets Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  9. Wonderful Sentense

    1.Sorry if I might sound arrogant or offensive. 2.Any further question? 3.How dare you! 4.Try it if ...

  10. flv视频播放器代码

    <div class="txt1"> <script type="text/javascript"> var swf_width=307 ...