ajax 多人聊天吧,基于Nodejs利用socket.io实现多人聊天室

socket.io简介

在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket。虽然代码短,但可以很好地体现websocket的原理。

,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道。但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块。在不支持websoket的浏览器中,socket.io可以降级为其他的通信方式,比如有AJAX long polling ,JSONP Polling等。

模块安装

新建一个package.json文件,在文件中写入如下内容:

npm install

执行完这句,node将会从npm处下载socket.io和express模块。

-

服务器端的实现

在文件夹中添加index.js文件,并在文件中写入如下内容:

socket server")

});

/*在线人员*/

var onLineUsers = {};

/* 在线人数*/

var onLineCounts = 0;

/*io监听到存在链接,此时回调一个socket进行socket监听*/

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

console.log('a user connected');

/*监听新用户加入*/

socket.on('login',function (user) {

"use strict";

//暂存socket.name 为user.userId;在用户退出时候将会用到

socket.name = user.userId;

/*不存在则加入 */

if (!onLineUsers.hasOwnProperty(user.userId)) {

//不存在则加入

onLineUsers[user.userId] = user.userName;

onLineCounts++;

}

/*一个用户新加入,向所有客户端监听login的socket的实例发送响应,响应内容为一个对象*/

io.emit('login',{onLineUsers: onLineUsers,onLineCounts: onLineCounts,user: user});

console.log(user.userName,"加入了聊天室");//在服务器控制台中打印么么么用户加入到了聊天室

});

/*监听用户退出聊天室*/

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

"use strict";

if (onLineUsers.hasOwnProperty(socket.name)) {

var user = {userId: socket.name,userName: onLineUsers[socket.name]};

delete onLineUsers[socket.name];

onLineCounts--;

/*向所有客户端广播该用户退出群聊*/

io.emit('logout',user: user});

console.log(user.userName,"退出群聊");

}

})

/*监听到用户发送了消息,就使用io广播信息,信息被所有客户端接收并显示。注意,如果客户端自己发送的也会接收到这个消息,故在客户端应当存在这的判断,是否收到的消息是自己发送的,故在emit时,应该将用户的id和信息封装成一个对象进行广播*/

socket.on('message',function (obj) {

"use strict";

/*监听到有用户发消息,将该消息广播给所有客户端*/

io.emit('message',obj);

console.log(obj.userName,"说了:",obj.content);

});

});

/*监听3000*/

http.listen(3000,function () {

"use strict";

console.log('listening 3000');

});

运行服务器端程序

此时在浏览器中打开localhost:3000会得到这样的结果:

201702220953105.png

原因是在代码中只对路由进行了如下设置

socket server")

});

服务器端主要是提供socketio服务,并没有设置路由。

客户端的实现

在客户端建立如下的目录和文件,其中json3.min.js可以从网上下载到。

client

- - - client.js

- - - index.html

- - - json3.min.js

- - - style.css

在index.html中

1301群聊