MyException - 我的异常网
当前位置:我的异常网» Web前端 » node+websocket 实时聊天范例

node+websocket 实时聊天范例

www.MyException.Cn  网友分享于:2015-08-26  浏览:55次
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?
  1. /  
  2.  * modules引入  
  3.  */  
  4. var express = require('express'),  
  5.     sio = require('socket.io'),  
  6.     fs=require('fs'),  
  7.     path = require('path')  
  8.     url = require('url');  
  9.   
  10. //=========================app配置=============================  
  11. /** 
  12.  * app配置 
  13.  */  
  14. var app = module.export = express.createServer();  
  15. //=================配置socket.io=========================  
  16. /** 
  17.  * 配置socket.io 
  18.  * 
  19.  */  
  20. var io = sio.listen(app);  
  21. // assuming io is the Socket.IO server object  
  22. io.configure(function () {  
  23.   ///io.set("transports", ["websocket"]);  
  24. });  
  25.   
  26. //===================socket链接监听=================  
  27. /** 
  28.  * 开始socket链接监听 
  29.  * @param {Object} socket 
  30.  */  
  31. io.sockets.on('connection'function (socket){  
  32.     //公共信息  
  33.     socket.on('public message',function(msg, fn){  
  34.         socket.broadcast.emit('public message',msg);  
  35.         fn(true);  
  36.     });  
  37.   
  38.     //掉线,断开链接处理  
  39.     socket.on('disconnect'function(){  
  40.         socket.broadcast.emit('public message','</pre> 
  41. <span style="color: red;">断开连接。。。</span> 
  42. <pre class="javascript">');  
  43.     });  
  44.   
  45. });  
  46.   
  47. app.listen(3000, function(){  
  48.     var addr = app.address();  
  49.     console.log('app listening on http://127.0.0.1:' + addr.port);  
  50. });  

4.客户端代码 chat.html

view plaincopy to clipboardprint?
  1. <!--<script src="/js/jquery.js"></script>  
  2. <script src="/js/socket.js"></script>--><script type="text/javascript">// <![CDATA[  
  3. $(function(){  
  4.   
  5.     var socket = io.connect('http://localhost:3000');  
  6.   
  7.     //开始连接服务器  
  8.     socket.on('connect'function(){  
  9.         $('#connecting').fadeOut();  
  10.         show('连接服务器成功')  
  11.     });  
  12.   
  13.     // 接收public message  
  14.     socket.on('public message'function(msg){  
  15.         show(msg);  
  16.     });  
  17.   
  18.     $('#btn').click(function(){  
  19.         var msg = $('#content').val();  
  20.         // 发送公共消息 public message  
  21.         socket.emit('public message', msg, function(ok){  
  22.             if (ok) {  
  23.   
  24.                 show(msg);  
  25.             }  
  26.         });  
  27.   
  28.     });  
  29.   
  30. });  
  31.   
  32. function show(msg){  
  33.     var htm =" 
  34.  
  35. <div class='message'>"+msg+"</div> 
  36.  
  37. ";  
  38.     $('#main').append(htm);  
  39. }  
  40. // ]]></script></pre>  
  41. <div id="main">  
  42. <div id="connecting">正在连接服务器..</div>  
  43. &nbsp;  
  44.   
  45. </div>  
  46. <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~


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

文章评论

不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
 程序员的样子
程序员的样子
程序员的鄙视链
程序员的鄙视链
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Java程序员必看电影
Java程序员必看电影
程序员必看的十大电影
程序员必看的十大电影
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
那些争议最大的编程观点
那些争议最大的编程观点
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
10个调试和排错的小建议
10个调试和排错的小建议
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
编程语言是女人
编程语言是女人
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员都该阅读的书
程序员都该阅读的书
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
我是如何打败拖延症的
我是如何打败拖延症的
我的丈夫是个程序员
我的丈夫是个程序员
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
鲜为人知的编程真相
鲜为人知的编程真相
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
如何成为一名黑客
如何成为一名黑客
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
漫画:程序员的工作
漫画:程序员的工作
每天工作4小时的程序员
每天工作4小时的程序员
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
老程序员的下场
老程序员的下场
旅行,写作,编程
旅行,写作,编程
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
代码女神横空出世
代码女神横空出世
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有