使用node.js + socket.io 构建多个房间聊天室

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liuqing_1/article/details/57157227

使用node.js + socket.io 构建多个房间聊天室

安装node以及相关插件

node我已经安装了,就不重复操作了,还有不会安装node的同学,请自行百度;
现在我们先创建一个package.json的问件,这里我们可以利用node自动生成:
 > npm init
现在我们目录下回自动生成一个package.json文件

这里写图片描述

接下来安装我们需要的socket.io , 这里我选择的是0.9.6的版本,因为1.0版本有些API有所改变;

npm install socket.io@0.9.6 --save

后面的 –save 是指将信息添加到package.json文件中:

这里写图片描述

现在安装好了socket.io , 接下来我们安装mime , mime模块是用来获取文件类型,以便设置正确的HTTP头的 “Content-Type”
> npm install mime@1.2.7 --save

这里写图片描述

接下来看看我们的目录和package.json文件:

这里写图片描述

现在多了一个node_modules文件夹,里面放着我们所需要的模块,还有package.json文件里面,也多了mime 和 socket.io ,这说明我们已经成功安装了;接下来说一下我们的目录结构:

这里写图片描述

创建静态文件服务器
现在我们想搭建一个静态文件服务器,先在sever.js里面添加以下代码:

这里写图片描述

现在我们创建了一个HTTP服务器,并监听3000端口,3000是我随便选的,其他的也可以,只要没有被占用;接下来我们写以下提供静态文件的serceStatic方法:

这里写图片描述

这里写图片描述

现在我们的HTTP服务器就已经搭建起来了,接下来我们运行看一下:
> node server
打开浏览器 地址栏输入localhost:3000 

这里写图片描述

这个时候我们看到页面上显示一个错误信息 “Error 404: resource not found.”,不用担心,这个时候我们服务器正常已经跑起来了,只是我们现在还没有添加静态文件,接下来我们在public目录下,添加一下我们的静态文件;

先在public目录下添加我们想要的文件,并引入需要的css和js

这里写图片描述

这里写图片描述

添加一下CSS样式

这里写图片描述

这里写图片描述

现在重新刷新一下页面,应该是下面这样:

这里写图片描述

到目前为止,我们的初期准备工作都已完成,接下来就是搭建我们的socket服务器了

使用socket.io搭建聊天室服务器
首先,我们先在lib目录下创建一个chat_server.js的文件,我们的socket.io服务器内容将写在这个里面;
第一步,我们先在server.js文件里面,引入我们的chat_server.js ,并将socket.io服务器与我们的HTTP服务器共享同一个端口号;

这里写图片描述

接下来我们开始编写我们的chat_server.js ;

这里写图片描述

现在我们初始化了一些变量,并且我们创建了一个事件监听,当有用户连接时,会调用一个自动分配访客名的assignGuestName函数;
接下来我们来写一下这个函数;

这里写图片描述

在这里我们做了四件事:
    1、生成了一个系统的默认昵称;
    2、将昵称和socket ID 关联起来;
    3、将昵称广播给用户;
    4、将昵称保存起来,以便别人修改昵称的时候不会重名。

现在我们在客户端添加代码,给socket.io绑定一个“nameResult”事件监听,编写我们的chat_ui.js文件:










接下来重启一下服务器,刷新页面,现在应该看到的是这个样子,现在页面显示了我们系统自动分配的用户名:

这里写图片描述

现在我们可以看到,页面已经显示出来了系统给我们的昵称,细心的同学可能会发现,控制台提示了一堆bug,像这样:

这里写图片描述

第一个其实是版本问题,我们先不用管他,后面的那些debug 都是一些授权之类的提示,这里我们不深究里面的内容,不想看到的同学,也可以关闭socket.io的debug信息功能,只需要在chat_server.js里面加上一句代码就行:

这里写图片描述

这里我们是将信息直接放到了页面#messages的元素里面,这里我们要将信息处理一下,如果用户输入script标签,直接放入页面这样容易形成跨域脚本攻击(XSS)攻击,这里我们写两个函数方法,用来处理用户输入信息和系统信息;
并且判断一下用户名有没有问题,有问题直接在聊天窗口显示出来;

这里写图片描述

接下来我们将用户放入聊天室里面,这里我们默认放在“Lobby”聊天室里面,编写我们的chat_server.js

这里写图片描述

这里我们的joinRoom()要做一下几件事情:
    1、让用户进入房间;
    2、记录用户当前的房间;
    3、让用户知道他们进入了新房间;
    4、让房间其他用户知道有新用户进入房间;
    5、将房间里的其他用户汇总发送给这个用户;

这里写图片描述

现在我们再客户端监听一下joinResult()事件和message()事件;

这里写图片描述

现在再来看看我们的页面效果,现在我们可以看到一些基本信息了,现在页面显示我们已经进入到了lobby聊天室

这里写图片描述

我们再来开一个窗口看看,这个时候应该会给Guest1提示Guest2进入房间,并且告诉Guest2有谁在Lobby房间;

这里写图片描述

这里写图片描述

接下来我们编写发送消息

这里写图片描述

这里写图片描述

在客户端chat_ui.js也加入发送消息的逻辑:

这里写图片描述

现在我们让Guest1用户发送一条消息,看看Guest2能不能接收到:

这里写图片描述

这里写图片描述

现在我们可以看到,Guest2收到了Guest1发送的消息,但是Guest1现在没有任何反应,因为我们是将message事件广播给除自己之外的所有用户的,所以我们要做一下处理,因为后续还有修改昵称和更换房间的命令,这里我们将聊天信息封装一下,这样让代码看起来比较优雅:

这里写图片描述

这里我们封装了一个Chat对象,并且将它实例化了,接下来我们看看Chat里面的逻辑代码,开始编写我们的chat.js

这里写图片描述

这里我们创建了一个Chat的构造函数,并且在它原型上创建了一个sendMessage的方法专门来发送聊天消息;
接下来,我们回过头来编写我们的chat_ui.js里面的processUserInput()方法,这个函数专门用来处理input里面的输入内容;

这里写图片描述

现在Guest1输入消息的时候,自己聊天窗口也会显示自己输入的消息:

这里写图片描述

到现在为止,我们的聊天室基本就已经完成了,现在我们再将功能完善一下,让用户可以修改昵称和更换房间;
先在我们服务器端添加一下更名请求的处理程序:

这里写图片描述

这里写图片描述

客户端chat_ui.js添加用户输入判断逻辑:

这里写图片描述

同样,我们再Chat原型上添加对应的processCommand()方法:

这里写图片描述

重启服务器,在页面输入修改昵称的命令:

这里写图片描述

这里写图片描述

同时输入错误的指令会报错,重复的昵称也会有提示:

这里写图片描述

接下来,我们添加更换房间的指令,同样的现在服务器端添加创建房间的逻辑代码:

这里写图片描述

这里写图片描述

接下来,我们再客户端天剑添加处理更换房间指令的逻辑代码:

这里写图片描述

现在我们再浏览器上试试:

这里写图片描述

现在我们可以看到,我们通过“/join aaa”的指令,成功的切换到了aaa的房间:
细心的同学可能会发现一个问题,那就是现在到底有哪些聊天室存在?
这里我们获取一下存在的聊天室,并显示出来,同时还添加一个事件,点击聊天室列表里面的名称,直接可以更换到该聊天室;

char_server.js
这里写图片描述

char_ui.js
这里写图片描述

现在再看看我们的页面,更换下房间试试:

这里写图片描述

记得要开两个以上的窗口看效果,因为我们的程序会自动清除没有人的房间,所以如果只有一个用户,那永远都只能看到一个房间;
最后我们再将功能完善一下,当用户离开的时候,自动释放昵称,以便其他用户使用;

这里写图片描述

这里写图片描述

至此,我们的聊天室就已经全部完成,代码比较简陋,主要是实现基本功能,还有很多地方可以去优化和完善;
再次提醒下,我这里用的socket.io是0.9.6版本的,如果有同学用的是1+版本的,记得里面有些API有所改变,

io.sockets.clients(room) 可以换成 io.sockets.adapter.rooms[room]
io.sockets.manager.rooms 可以换成 io.sockets.adapter.rooms

不过亲测数据有点改变,需要有小的改动,这里就不列出来了,大家可以去试试。
展开阅读全文

没有更多推荐了,返回首页