node+websocket 实时聊天范例 _Web前端

node+websocket 实时聊天实例

最近，负责的游戏需要一个聊天功能，由于是实时的聊天，便想到了现在挺火的websocket,折腾了一天一夜，总算有点眉目了，现在总结如下：
websocket 是html5一个通信协议，可以实时通信。本例的聊天是用的socket的框架socket.io实现的，socket.io 集成了websocket和xhr-polling（长轮询）等多种通信方式
1.搭建node环境
从node官网，本人选择的window的msi 一键安装.安装完node 之后还需配置系统环境变量 PATH 属性里添加上你的测试地址路径. biu~ biu~

2.安装socket.io
用npm install-g socket.io 命令或者从socket.io官网下载文件放到node_modules文件夹里面

3.服务端代码 server.js

view plaincopy
 to clipboardprint?

/  

 * modules引入  

 */  

var express = require('express'),  

    sio = require('socket.io'),  

    fs=require('fs'),  

    path = require('path')  

    url = require('url');  

//=========================app配置=============================  

/** 

 * app配置 

 */  

var app = module.export = express.createServer();  

//=================配置socket.io=========================  

/** 

 * 配置socket.io 

 * 

 */  

var io = sio.listen(app);  

// assuming io is the Socket.IO server object  

io.configure(function () {  

  ///io.set("transports", ["websocket"]);  

});  

//===================socket链接监听=================  

/** 

 * 开始socket链接监听 

 * @param {Object} socket 

 */  

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

    //公共信息  

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

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

        fn(true);  

    });  

    //掉线，断开链接处理  

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

        socket.broadcast.emit('public message','</pre> 

<span style="color: red;">断开连接。。。</span> 

<pre class="javascript">');  

    });  

});  

app.listen(3000, function(){  

    var addr = app.address();  

    console.log('app listening on http://127.0.0.1：' + addr.port);  

});

4.客户端代码 chat.html

view plaincopy
 to clipboardprint?

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

<script src="/js/socket.js"></script>--><script type="text/javascript">// <![CDATA[  

$(function(){  

    var socket = io.connect('http://localhost:3000');  

    //开始连接服务器  

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

        $('#connecting').fadeOut();  

        show('连接服务器成功')  

    });  

    // 接收public message  

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

        show(msg);  

    });  

    $('#btn').click(function(){  

        var msg = $('#content').val();  

        // 发送公共消息 public message  

        socket.emit('public message', msg, function(ok){  

            if (ok) {  

                show(msg);  

            }  

        });  

    });  

});  

function show(msg){  

    var htm =" 

<div class='message'>"+msg+"</div> 

";  

    $('#main').append(htm);  

}  

// ]]></script></pre>  

<div id="main">  

<div id="connecting">正在连接服务器..</div>  

&nbsp;  

</div>  

<div id="send"><input id="content" type="text" /><button id="btn">发送</button></div>

5.先运行服务端命令：node server.js

客服端访问client.html地址比如 http://localhost/…/chat.html
下面是 Firefox和chrome的结果

ps:目前firebox不支持websocket协议，用的是xhr-polling ，chrome用的是标准的websocket协议
下面从node服务器截取的图片

现在websocket的标准还没确定，不同浏览器对握手协议支持的不同。总之现在用websocket 是不推荐的，biu~biu~

更多原创文章请关注我的博客美公网天下