socket官方：   http://socket.io/ 

需求：实现WEB IM功能，数据从服务器PUSH  不是PULL

 websocket是基于HTML5的新特性，不兼容IE6,7,8 。。。兼容性不好

使用 Node.js 和 Socket.IO 构建简单的聊天程序

在node.js根目录下创建文件夹chat，里面添加两个文件：app.js和index.html

app.js

var fs = require('fs')

    , http = require('http')

    , socketio = require('socket.io');

var server = http.createServer(function(req, res) {

    res.writeHead(200, { 'Content-type': 'text/html'});

    res.end(fs.readFileSync(__dirname + '/index.html'));

}).listen(8080, function() {

    console.log('Listening at: http://localhost:8080');

});

socketio.listen(server).on('connection', function (socket) {

    socket.on('message', function (msg) {

        console.log('Message Received: ', msg);

        socket.broadcast.emit('message', msg);

    });

});

index.html

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>

    <script>

        $(function(){

            var iosocket = io.connect();

            iosocket.on('connect', function () {

                $('#incomingChatMessages').append($('<li>Connected</li>'));

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

                    $('#incomingChatMessages').append($('<li></li>').text(message));

                });

                iosocket.on('disconnect', function() {

                    $('#incomingChatMessages').append('<li>Disconnected</li>');

                });

            });

            $('#outgoingChatMessage').keypress(function(event) {

                if(event.which == 13) {

                    event.preventDefault();

                    iosocket.send($('#outgoingChatMessage').val());

                    $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));

                    $('#outgoingChatMessage').val('');

                }

            });

        });

    </script>

</head>

<body>

Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul>

<br />

<input type="text" id="outgoingChatMessage">

</body>

</html>

开启服务器

node chat/app.js

打开两个chrome输入localhost:8080

这样就看到效果了，然后你可以慢慢研究代码了，再然后就洗洗睡吧。

使用的源码来自http://www.open-open.com/lib/view/open1337216216557.html

Node.js 和Socket.IO 实现chat WEBIM的更多相关文章

  1. node.js和socket.io纯js实现的即时通讯实例分享

    在这个例子中,其实node.js并没有真正起到服务器的作用,因为我们这里可以直接运行client.html文件,而不用输入url请求,当 然,要想输入url请求页面内容还需要加入请求静态文件的代码.这 ...

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

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

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

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

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

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

  5. Node.js + Web Socket 打造即时聊天程序嗨聊

    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...

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

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

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

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

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

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

  9. node中的socket.io制作命名空间

    如果开发者想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的"/"命名空间就足够了.但是如果开发者需要将应用程序作为第三方服务提供给其他应用程序,则需要为一个用 ...

随机推荐

  1. UVA11922--Permutation Transformer (伸展树Splay)

    题意:m条操作指令,对于指令 a  b 表示取出第a~b个元素,翻转后添加到排列的尾部. 水题卡了一个小时,一直过不了样例.  原来是 dfs输出的时候 忘记向下传递标记了. #include < ...

  2. Codeforce 219 div1

    B 4D"部分和"问题,相当于2D部分和的拓展,我是分解成2D部分和做的: f[x1][y1][x2][y2]=true/false 表示 左上(x1,y1) 右下(x2,y2)的 ...

  3. DL，DT，DD，比传统table更语义，解析更快的table列表方式

    使用dl,dt,dd替代传统的table布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  4. 关于matlab中textread

    本文主要内容引自http://linux.chinaitlab.com/administer/872894.html 笔者在此基础上进行运行,修改得到以下内容,希望大家给与补充: textread 基 ...

  5. Collections.sort()

    Comparator是个接口,可重写compare()及equals()这两个方法,用于比价功能:如果是null的话,就是使用元素的默认顺序,如a,b,c,d,e,f,g,就是a,b,c,d,e,f, ...

  6. MyEclipse默认编码为GBK，修改为UTF8的方法

    MyEclipse 默认编码居然是GBK,js文件默认编码是ISO-....怎么可以这样呢? 都修改成UTF8的方法: 1.windows->Preferences...打开"首选项& ...

  7. Android中自定义ActionBar的背景色等样式style

    Android中想要去自定义ActionBar的背景色等样式. [折腾过程] 1.自己找代码,发现对应的配置的地方了: AndroidManifest.xml ? 1 2 <applicatio ...

  8. CSS3 之 box-shadow

    1. css3 box-shadow CSS3的box-shadow属性可以让我们轻松实现图层阴影效果 box-shadow:  inset(可选 默认没有) x-offset    y-offset ...

  9. jquery,js常用特效名称

  10. 黑马程序员—— Java SE（3）

    ----<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS培训 ...