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

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地址比如 http://localhost/…/chat
下面是 Firefox和chrome的结果

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

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

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