在这个例子中，其实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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>socketIO - Simple chat</title>

        <script src="./socketio.js"></script>

        <style>

            * { font-family:tahoma; font-size:12px; padding:0px; margin:0px; }

            p { line-height:18px; }

            div { }

            .textInput{width:500px;margin:  auto;margin-top: 50px;}

            #content { padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll;

                border:1px solid #CCC; height: 160px;width: 400px;float: left;}

            #input { border-radius:2px; border:1px solid #ccc;

                margin-top:10px; padding:5px; width:400px;  }

            #status { width:88px; display:block; float:left; margin-top:15px; }

            .onlineList {

                width: 200px;

                height: 160px;

                background-color: #ccc;

                border: 1px solid #DDD;

                margin-top: 50px;

                margin-left: 420px;

            }

            li {

                display: inline;border: 1px solid red;

            }

            .ul {

                margin-left:auto; margin-right:auto;

                width: 600px;

            }

        </style>

    </head>

    <script type="text/javascript">

        //window.onbeforeunload = disConnect;

    </script>

    <body>

        <div class="ul">

            <div id="content"></div>

            <div class="onlineList">

                当前在线：

                <div id="list">

                </div>

            </div>

        </div>

        <div class="textInput">

            <span id="status">connecting</span>

            <input type="text" id="input" value="只能选择右上列表上的姓名进行登录"/>

        </div>

        <script src="./jquery.js"></script>

        <script src="./client.js"></script>

    </body>

</html>

对应的client.js文件

    "use strict";

    // for better performance - to avoid searching in DOM

    var content = $('#content');

    var input = $('#input');

    var statusObj = $('#status');

    var userList = $("#list");

    // my color assigned by the server

    var myColor = false;

    // my name sent to the server

    var myName = false;

    var connection = null;

    var currentToUser = null;

    connect();

    window.onbeforeunload = beforeDisConnect;//监听浏览器关闭前的事件

    window.onunload = disConnect;//监听浏览器关闭时

    /**

     * Send mesage when user presses Enter key

     */

    input.keydown(function (e) {

        if (e.keyCode === ) {

            var msg = $(this).val();

            if (!msg) {

                return;

            }

            if (!myName) {

                myName = msg;//定义名字

                statusObj.text(myName);

                input.val("");

                if (connection) {

                    connection.json.send({ logicId: "login", username: myName });

                }

                return;

            }

            var time = new Date();

            var tmpTime = time.getFullYear() + "-" + ((time.getMonth() <  ? "" : "") + (time.getMonth() + )) + "-" + ((time.getDate() <  ? "" : "") + time.getDate()) + " "

                    + ((time.getHours() <  ? "" : "") + time.getHours()) + ":" + ((time.getMinutes() <  ? "" : "") + time.getMinutes()) + ":" + ((time.getSeconds() <  ? "" : "") + time.getSeconds());

            // send the message as an ordinary text

            msg = { "@class": "test.EntityIn", logicId: "chat", username: myName, msg: input.val(),

            to:currentToUser,time:tmpTime};

            //alert(typeof(object));

            connection.json.send(msg);

            $(this).val('');

            // disable the input field to make the user wait until server

            // sends back response

        }

    });

    /**

     * Add message to the chat window

     */

    function addMessage(author, message, dt) {

        content.prepend('<p><span>' + author + '</span> @ '+dt+ ': ' + message + '</p>');

    }

function connect() {

    // open connection

    connection = io.connect('http://127.0.0.1:1337', { 'reconnect': false });

    connection.on('connect', function (data) {

        // first we want users to enter their names

        input.removeAttr('disabled');

        statusObj.text('登录:');

        connection.send();

    });

    connection.on("error", function (error) {

        // just in there were some problems with conenction...

        content.html($('<p>', {

            text: 'Sorry, but there\'s some problem with your '

                + 'connection or the server is down.'

        }));

    });

    // most important part - incoming messages

    connection.on("message", function (message) {

        var logicId = message.logicId;

        if (logicId == 'conn_success') {//连接成功

            var users = message.users;

            for (var i = ; i < users.length; i++) {

                userList.append('<a href="#" onclick="chatToSb(this.innerHTML)">'+users[i]+'</a></br>');

            }

        } else if (logicId == "chat") {

            addMessage(message.from,message.msg,message.time);

        }else if(logicId == "history"){

            var historyMsgs = message.historyMsgs;

            for(var i = ; i < historyMsgs.length; i++){

                addMessage(historyMsgs[i].from,historyMsgs[i].msg,historyMsgs[i].time);

            }

        }

    });

}

function chatToSb(username) {

    currentToUser = username;

}

function disConnect(){

    connection.disconnect();

    //alert("断开连接");

}

function beforeDisConnect() {

    return "确认离开";

}

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

    "use strict";  

    var http = require('http');  

    /**

     * Global variables

     */

    var history = [];

    // list of currently connected clients (users)

    var users = ["user1","user2"];

    var clients = [];  

    /**

     * HTTP server

     */

    var server = http.createServer(function (request, response) {

        // Not important for us. We're writing socket.io server, not HTTP server

    });

    server.listen();  

    /**

     * socketio server

     */

    var io = require("socket.io").listen(server);  

    //io监听socket事件

    io.on('connection', function (connection) {

        console.log((new Date()) + ' Connection from origin ' + connection.id + '.');

        var json = { logicId:"conn_success",users: users };

        connection.json.send(json);

        var userName = false;  

        console.log((new Date()) + ' Connection accepted.');  

        connection.on('message', function (message) {

            console.log(message);

            if (message.logicId == "login") {

                clients[message.username] = connection; //将用户名与连接对应

                connection.username = message.username;

            }else if(message.logicId == "chat") {//用户发起会话

                //1、查找该用户是否有历史消息

                var toUser = message.to;//会话目标

                var from = message.username;//会话发起人

                if(history[toUser]&&history[toUser][from]){

                    var historyMsgs = [];

                    for (var i = ; i < history[toUser][from].length; i++) {

                        historyMsgs.push(history[toUser][from][i]);

                    };

                    connection.json.send({logicId:"history",historyMsgs:historyMsgs});

                }

                //2、检查目标用户是否在线，若在线，转发用户请求,否则，存为历史会话中

                var objConnect = clients[toUser];

                var chatJson = {logicId:"chat", from: from, time: message.time, msg: message.msg };

                    connection.json.send(chatJson);

                if (objConnect) {

                    objConnect.json.send(chatJson);

                } else {//存储于历史会话中

                    if (!history[from]||!history[from][toUser]) {

                        if (!history[from]) {

                            history[from] = [];

                        }

                        history[from][toUser] = [];

                    }

                    history[from][toUser].push(chatJson);

                }

            }

        });  

        // user disconnected

        connection.on('disconnect', function (socket) {

            console.log("关闭连接:" + socket);

            delete clients[connection.username];//删除用户的连接  

        });  

    });

这里都假设大家是在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. 关于Google Chorme中字体小于12px的问题

    问题:当字体大小设置成小于12px时,Google chrome中字体的大小始终显示为12px. 而其他浏览器则没有这个问题. 这时只需要在要改变字体大小的元素中添加 -webkit-transfor ...

  2. 《MFC游戏开发》笔记九 游戏中的碰撞判定初步&怪物运动简单AI

    本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9374935 作者:七十一雾央 新浪微博:http:// ...

  3. React Native中常见操作

    一.如何将项目安装到iOS手机上? 1.将手机于电脑连接好,并将Xcode打开连接上手机 2.在General  -> Team 下添加自己的Apple ID. 3.改本地的IP地址: 4.点击 ...

  4. WPF全球化与本地化 （二）

    Visual Baml Visual Locbaml is a free and open-source software to simplify the task of WPF applicatio ...

  5. 剑指Offer30 从1到n整数出现1的个数

    /************************************************************************* > File Name: 30_NumerO ...

  6. CF 118E Bertown roads 桥

    118E Bertown roads 题目:把无向图指定边的方向,使得原图变成有向图,问能否任意两点之间互达 分析:显然如果没有桥的话,存在满足题意的方案.输出答案时任意从一个点出发遍历一遍即可. 求 ...

  7. UIActionSheet警告，提示调用showFromTabBar方法

    UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:@"选择图片" delegate:(self) c ...

  8. 【转】IT管理人才必备的十大能力

    作为IT技术人员,相信没有一个人愿意永远在底层编写程序或做简单的系统维护.经过一段时间的技术和经验的积累,很多人都向往更高层的职位,但如何能成为一个专业的IT管理人才,并不是每一个人都清晰.明了. & ...

  9. Java开发从零开始填坑

    开始学习Java,感觉较.NET知识更零碎一些,所以开个帖子把自己踩过的坑记录下来,都是边边角角网上不容易找到的东西. 1.java命令格式:>cd %parent-of-pakadgePath ...

  10. 【转载】在 Visual Studio 2012 中创建 ASP.Net Web Service

    在 Visual Studio 2012 中创建 ASP.Net Web Service,步骤非常简单.如下: 第一步:创建一个“ASP.Net Empty Web Application”项目 创建 ...