1024_(即时通讯)使用node.js和socket.io实现多人聊天室

使用node.js和socket.io实现多人聊天室

2015年01月24日 03:24:54 远古大猛犸 阅读数:2775

转自:

http://www.cnblogs.com/flyoung2008/archive/2012/07/19/2600132.html

http://blog.fens.me/nodejs-socketio-chat/

 

一、基本功能

1、用户随意输入一个昵称即可登录
2、登录成功后
1) 对正在登录用户来说,罗列所有在线用户列表,罗列最近的历史聊天记录
2) 对已登录的用户来说,通知有新用户进入房间,更新在线用户列表
3、退出登录
1)支持直接退出
2) 当有用户退出,其他所有在线用户会收到信息,通知又用户退出房间,同时更新在线用户列表
4、聊天
1) 聊天就是广播,把信息广播给所有连接在线的用户
5、一些出错处理
1) 暂时简单处理了系统逻辑错误、网络出错等特殊情况的出错提示

问题:功能不完善,有bug(退出后,新用户重新登录,还是原来的用户) 。抽空完善吧

二、技术介绍

socket.io(官网:http://socket.io/)是一个跨平台,多种连接方式自动切换,做即时通讯方面的开发很方便,而且能和expressjs提供的传统请求方式很好的结合,即可以在同一个域名,同一个端口提供两种连接方式:request/response, websocket(flashsocket,ajax…)。

这篇文章对socket.io的使用做了详细介绍:http://www.cnblogs.com/dxy1982/archive/2012/01/30/2328020.html

《用node.js和Websocket做个多人聊天室吧》http://www.html5china.com/HTML5features/WebSocket/20111206_3096.html

三、注意事项

(1)客户端这样引用socket.io.js:

可能会加载失败(我在这里耗了不少时间)

可以改为:

(对应服务器的ip地址和端口号,比如说localhost和80端口)

(2)实现广播的时候,参考官网的写法,竟然不起作用,如:

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
  socket.broadcast.emit('user connected');
  socket.broadcast.json.send({ a: 'message' });
});

后来看了这个:http://stackoverflow.com/questions/7352164/update-all-clients-using-socket-io

改为以下才起作用:

io.sockets.emit('users_count', clients);

四、效果图

五、源码下载

  Nodejs多人聊天室

ps:

1、在命令行运行

node main.js

然后在浏览器中打开index.html,如果浏览器(ff、Chrome)不支持,请升级到支持WebSocket的版本.

2、推荐node.js的IDE WebStorm

 

=============================================================================================================================

 

前言

网络聊天室在web1.0的时代就出现了,但当时技术支持比较有限,大都是通过浏览器插件BHO,JavaApplet,Flash实现的。如今HTML5技术风起云涌,通过websocket实现的网络聊天室,被定义为websocket的第一个实验,就像Hello World一样的简单。

今天我也动手完成了这个实验,感觉真的很爽!

目录

  1. socket.io介绍
  2. 服务器端和客户端通信设计
  3. 服务器端实现
  4. 客户端实现
  5. 完整案例代码

1. socket.io介绍

socket.io一个是基于Nodejs架构体系的,支持websocket的协议用于时时通信的一个软件包。socket.io 给跨浏览器构建实时应用提供了完整的封装,socket.io完全由javascript实现。

基于Nodejs实现webscoket其他的框架,请参考文章:Nodejs实现websocket的4种方式

2. 服务器端和客户端通信设计

chat

上图中client1 和 server 描述通信过程,client2描述对其他的客户端,通过广播进行消息通信。

  1. client1向server发起连接请求
  2. server接受client的连接
  3. client1输入登陆用户名
  4. server返回欢迎语
  5. server通过广播告诉其他在线的用户,client1已登陆
  6. client1发送聊天信息
  7. server返回聊天信息(可省略)
  8. server通过广播告诉其他在线的用户,client1的聊天消息
  9. client1关闭连接,退出登陆
  10. server通过广播告诉其他在线的用户,client1已退出

我们看一下测试截图:
chat2

  1. 左边: aaa 登陆
  2. 右边: bbb 登陆
  3. 左边: aaa 收到 bbb登陆欢迎消息
  4. aaa 和 bbb 实现对话
  5. 右边: bbb 刷新浏览自动退出
  6. 左边: aaa 收到 bbb的退出消息
  7. 右边: CCC 登陆
  8. 左边: aaa 收到 CCC 登陆欢迎消息
  9. aaa 和 CCC 实现对话

3. 服务器端实现

我们这里使用socket.io和express3的混合模式,让HTTP请求和WebSocket请求都使用3000端口。

服务器端实现,只有一个核心文件app.js。

 
  1.  
  2. //引入程序包

  3. var express = require('express')

  4. , path = require('path')

  5. , app = express()

  6. , server = require('http').createServer(app)

  7. , io = require('socket.io').listen(server);

  8.  
  9. //设置日志级别

  10. io.set('log level', 1);

  11.  
  12. //WebSocket连接监听

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

  14. socket.emit('open');//通知客户端已连接

  15.  
  16. // 打印握手信息

  17. // console.log(socket.handshake);

  18.  
  19. // 构造客户端对象

  20. var client = {

  21. socket:socket,

  22. name:false,

  23. color:getColor()

  24. }

  25.  
  26. // 对message事件的监听

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

  28. var obj = {time:getTime(),color:client.color};

  29.  
  30. // 判断是不是第一次连接,以第一条消息作为用户名

  31. if(!client.name){

  32. client.name = msg;

  33. obj['text']=client.name;

  34. obj['author']='System';

  35. obj['type']='welcome';

  36. console.log(client.name + ' login');

  37.  
  38. //返回欢迎语

  39. socket.emit('system',obj);

  40. //广播新用户已登陆

  41. socket.broadcast.emit('system',obj);

  42. }else{

  43.  
  44. //如果不是第一次的连接,正常的聊天消息

  45. obj['text']=msg;

  46. obj['author']=client.name;

  47. obj['type']='message';

  48. console.log(client.name + ' say: ' + msg);

  49.  
  50. // 返回消息(可以省略)

  51. socket.emit('message',obj);

  52. // 广播向其他用户发消息

  53. socket.broadcast.emit('message',obj);

  54. }

  55. });

  56.  
  57. //监听出退事件

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

  59. var obj = {

  60. time:getTime(),

  61. color:client.color,

  62. author:'System',

  63. text:client.name,

  64. type:'disconnect'

  65. };

  66.  
  67. // 广播用户已退出

  68. socket.broadcast.emit('system',obj);

  69. console.log(client.name + 'Disconnect');

  70. });

  71.  
  72. });

  73.  
  74. //express基本配置

  75. app.configure(function(){

  76. app.set('port', process.env.PORT || 3000);

  77. app.set('views', __dirname + '/views');

  78. app.use(express.favicon());

  79. app.use(express.logger('dev'));

  80. app.use(express.bodyParser());

  81. app.use(express.methodOverride());

  82. app.use(app.router);

  83. app.use(express.static(path.join(__dirname, 'public')));

  84. });

  85.  
  86. app.configure('development', function(){

  87. app.use(express.errorHandler());

  88. });

  89.  
  90. // 指定webscoket的客户端的html文件

  91. app.get('/', function(req, res){

  92. res.sendfile('views/chat.html');

  93. });

  94.  
  95. server.listen(app.get('port'), function(){

  96. console.log("Express server listening on port " + app.get('port'));

  97. });

  98.  
  99. var getTime=function(){

  100. var date = new Date();

  101. return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

  102. }

  103.  
  104. var getColor=function(){

  105. var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',

  106. 'orange','blue','blueviolet','brown','burlywood','cadetblue'];

  107. return colors[Math.round(Math.random() * 10000 % colors.length)];

  108. }

4. 客户端实现

这里我们需要定义几个文件:chat.html, chat.js, jquery.min.js, main.css

1). views/chat.html

 
  1.  
  2. Socket.io - Simple chat

  3. Socket.io - Simple chat room

  4. Connecting...

  • 2). public/javascript/chat.js

     
    1.  
    2. $(function () {

    3. var content = $('#content');

    4. var status = $('#status');

    5. var input = $('#input');

    6. var myName = false;

    7.  
    8. //建立websocket连接

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

    10. //收到server的连接确认

    11. socket.on('open',function(){

    12. status.text('Choose a name:');

    13. });

    14.  
    15. //监听system事件,判断welcome或者disconnect,打印系统消息信息

    16. socket.on('system',function(json){

    17. var p = '';

    18. if (json.type === 'welcome'){

    19. if(myName==json.text) status.text(myName + ': ').css('color', json.color);

    20. p = '

      system @ '+ json.time+ ' : Welcome ' + json.text +'

      ';

    21. }else if(json.type == 'disconnect'){

    22. p = '

      system @ '+ json.time+ ' : Bye ' + json.text +'

      ';

    23. }

    24. content.prepend(p);

    25. });

    26.  
    27. //监听message事件,打印消息信息

    28. socket.on('message',function(json){

    29. var p = '

      ' + json.author+' @ '+ json.time+ ' : '+json.text+'

      ';

    30. content.prepend(p);

    31. });

    32.  
    33. //通过“回车”提交聊天信息

    34. input.keydown(function(e) {

    35. if (e.keyCode === 13) {

    36. var msg = $(this).val();

    37. if (!msg) return;

    38. socket.send(msg);

    39. $(this).val('');

    40. if (myName === false) {

    41. myName = msg;

    42. }

    43. }

    44. });

    45. });

    3). public/javascript/jquery.min.js
    从jquery官方下载: http://jquery.com/

    4). public/css/main.css

     
    1.  
    2. * {padding:0px; margin:0px;}

    3. body{font-family:tahoma; font-size:12px;margin:10px;}

    4. p {line-height:18px;padding:2px;}

    5. div {width:500px;}

    6. #content {

    7. padding:5px;

    8. background:#ddd;

    9. border-radius:5px;

    10. border:1px solid #CCC;

    11. margin-top:10px;

    12. }

    13. #input {

    14. border-radius:2px;

    15. border:1px solid #ccc;

    16. margin-top:10px;

    17. padding:5px;

    18. width:380px;

    19. }

    20. #status {

    21. width:100px;

    22. display:block;

    23. float:left;

    24. margin-top:15px;

    25. }

    5. 完整案例代码

    项目已经上传到github: https://github.com/bsspirit/chat-websocket

    下载,安装,启动服务器

     
    1.  
    2. git clone https://github.com/bsspirit/chat-websocket.git

    3. npm install

    4. node app.js

    打开浏览器
    可以多打开几个窗口,模拟不同用户有的对话。

    http://localhost:3000

    做完实验,感觉棒极了。技术创新的革命!!

    你可能感兴趣的:(WebSocket,node,socket)