最近,负责的游戏需要一个聊天功能,由于是实时的聊天,便想到了现在挺火的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
/ * 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
<!--<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> </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~