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');
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. });
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. });
38. //掉线，断开链接处理
39. socket.on('disconnect', function(){
40. socket.broadcast.emit('public message','</pre>
41. <span style="color: red;">断开连接。。。</span>
42. <pre class="javascript">');
43. });
45. });
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(){
5. var socket = io.connect('http://localhost:3000');
7. //开始连接服务器
8. socket.on('connect', function(){
9. $('#connecting').fadeOut();
10. show('连接服务器成功')
11. });
13. // 接收public message
14. socket.on('public message', function(msg){
15. show(msg);
16. });
18. $('#btn').click(function(){
19. var msg = $('#content').val();
20. // 发送公共消息 public message
21. socket.emit('public message', msg, function(ok){
22. if (ok) {
24. show(msg);
25. }
26. });
28. });
30. });
32. function show(msg){
33. var htm ="
35. <div class='message'>"+msg+"</div>
37. ";
38. $('#main').append(htm);
39. }
40. // ]]></script></pre>
41. <div id="main">
42. <div id="connecting">正在连接服务器..</div>
43.  
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~

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