node+express+socket.io打造一个简单群聊天室

下图为效果图：

Node相关

首先，我们要配置node环境。这个可以查看一个node的安装教程，http://www.runoob.com/nodejs/nodejs-tutorial.html点击这个可以查看怎么安装node配置环境。

配置好node环境以后在我们新建的项目里面我们会有如下文件：

然后我们就可以开始创建一个简单的HTTP服务器啦。

类似下面非常简单的代码，它创建了一个HTTP服务器并监听系统的80端口。

//node server example

//引入http模块
var http = require('http'),
    //创建一个服务器
    server = http.createServer(function(req, res) {
        res.writeHead(200, {
            'Content-Type': 'text/plain'
        });
        res.write('hello world!');
        res.end();
    });
//监听80端口
server.listen(80);
console.log('server started')

将其保存为一个js文件比如server.js，然后从命令行运行node server或者node server.js，服务器便可启动了，此刻我们可以在浏览器地址栏输入localhost进行访问，也可以输入本机IP127.0.0.1，都不用加端口，因为我们服务器监听的是默认的80端口。
当然，如果你机子上面80端口被其他程序占用了，可以选择其他端口比如8080，这样访问的时候需要显示地加上端口号localhost:8080。

Express

首先通过npm进行安装

在我们的项目文件夹下打开命令行（tip: 按住Shift同时右击，可以在右键菜单中找到'从此处打开命令行'选项）
在命令行中输入 npm install express 回车进行安装
然后在server.js中通过require('express')将其引入到项目中进行使用

express是node.js中管理路由响应请求的模块，根据请求的URL返回相应的HTML页面。这里我们使用一个事先写好的静态页面返回给客户端，只需使用express指定要返回的页面的路径即可。如果不用这个包，我们需要将HTML代码与后台JavaScript代码写在一起进行请求的响应，不太方便。

//返回一个简单的HTML内容

server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/html' //将返回类型由text/plain改为text/html
    });
    res.write('<h1>hello world!</h1>'); //返回HTML标签
    res.end();
});

在存放上一步创建的server.js文件的地方，我们新建一个文件夹名字为www用来存放我们的网页文件，包括图片以及前端的js文件等。假设已经在www文件夹下写好了一个index.html文件（将在下一步介绍，这一步你可以放一个空的HTML文件），则可以通过以下方式使用express将该页面返回到浏览器。可以看到较最开始，我们的服务器代码简洁了不少。

//使用express模块返回静态页面

var express = require('express'), //引入express模块
    app = express(),
    server = require('http').createServer(app);
app.use('/', express.static(__dirname + '/www')); //指定静态HTML文件的位置
server.listen(80);

socket.io

Node.js中使用socket的一个包。使用它可以很方便地建立服务器到客户端的sockets连接，发送事件与接收特定事件。

同样通过npm进行安装 npm install socket.io 。安装后在node_modules文件夹下新生成了一个socket.io文件夹，其中我们可以找到一个socket.io.js文件。将它引入到HTML页面，这样我们就可以在前端使用socket.io与服务器进行通信了。

<script src="/socket.io/socket.io.js"></script>

同时服务器端的server.js里跟使用express一样，也要通过require('socket.io')将其引入到项目中，这样就可以在服务器端使用socket.io了。

使用socket.io，其前后端句法是一致的，即通过socket.emit()来激发一个事件，通过socket.on()来侦听和处理对应事件。这两个事件通过传递的参数进行通信。具体工作模式可以看下面这个示例。

比如我们在index.html里面有如下JavaScript代码（假设你已经在页面放了一个ID为sendBtn的按钮）：

<script type="text/javascript">
	var socket=io.connect(),//与服务器进行连接
		button=document.getElementById('sendBtn');
	button.onclick=function(){
		socket.emit('foo', 'hello');//发送一个名为foo的事件，并且传递一个字符串数据‘hello’
	}
</script>

上述代码首先建立与服务器的连接，然后得到一个socket实例。之后如果页面上面一个ID为sendBtn的按钮被点击的话，我们就通过这个socket实例发起一个名为foo的事件，同时传递一个hello字符串信息到服务器。

与此同时，我们需要在服务器端写相应的代码来处理这个foo事件并接收传递来的数据。

为此，我们在server.js中可以这样写：

//服务器及页面响应部分
var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server); //引入socket.io模块并绑定到服务器
app.use('/', express.static(__dirname + '/www'));
server.listen(80);

//socket部分
io.on('connection', function(socket) {
    //接收并处理客户端发送的foo事件
    socket.on('foo', function(data) {
        //将消息输出到控制台
        console.log(data);
    })
});
现在Ctrl+C关闭之前启动的服务器，再次输入node server启动服务器运行新代码查看效果，一切正常的话你会在点击了页面的按扭后，在命令行窗口里看到输出的'hello'字符串。

基本页面

<div class="live-box-right">
<div class="live-chat">
<div class="chat-top">
<span class="chat-tit">聊天室</span>
<i class="chat-all"><img src="img/footballLive/ren_icon.png"/ ><span id="status"></span></i>
</div>
<div class="chat-con" id="message" >
<div class="message" id="historyMsg">
</div>
</div>
<textarea id="messageInput" placeHolder="请输入文字" class="chatnow" maxlength="80"></textarea>
<input id="sendBtn" type="button" value="发送" class="sendBtn">
</div>
</div>
</div> //聊天页面模块

<div id="loginWrapper">
<p id="info">正在连接服务器...</p>
<div id="nickWrapper">
<input type="text" placeHolder="昵称" id="nicknameInput" />
<input type="button" value="OK" id="loginBtn" />
</div>
</div> //这里是登陆的模块

这个是聊天的基本的页面结构是这样的样式的话自己写我就不贴出来了

下面开始写一些基本的前端js开始实现连接功能。

定义一个全局变量用于我们整个程序的开发，同时使用window.onload在页面准备好之后实例化项目，调用其init方法运行我们的程序。

window.onload = function() {
//实例并初始化我们的程序
var hichat = new HiChat();
hichat.init();
};

//定义我们的类
var HiChat = function() {
this.socket = null;
};

//向原型添加业务方法
HiChat.prototype = {
init: function() { //此方法初始化程序
var that = this;
//建立到服务器的socket连接
this.socket = io.connect("http://127.0.1.111:8088");
//监听socket的connect事件，此事件表示连接已经建立
this.socket.on('connect', function() {
//连接到服务器后，显示昵称输入框
document.getElementById('info').textContent = '请输入你的昵称';
document.getElementById('nickWrapper').style.display = 'block';
document.getElementById('nicknameInput').focus();
});

上面的代码定义了整个程序需要使用的类HiChat，之后我们处理消息显示消息等所有业务逻辑均写在这个类里面。

首先定义了一个程序的初始化方法，这里面初始化socket，监听连接事件，一旦连接到服务器，便显示昵称输入框。当用户输入昵称后，便可以在服务器后台接收到然后进行下一步的处理了。

设置昵称

//昵称设置的确定按钮
document.getElementById('loginBtn').addEventListener('click', function() {
var nickName = document.getElementById('nicknameInput').value;
//检查昵称输入框是否为空
if(nickName.trim().length != 0) {
//不为空，则发起一个login事件并将输入的昵称发送到服务器
that.socket.emit('login', nickName);
} else {
//否则输入框获得焦点
document.getElementById('nicknameInput').focus();
};
}, false);

server.js文件写：

var express = require('express'), //引入express模块
app = express(),
server = require('http').createServer(app);
io = require('socket.io').listen(server); //引入socket.io模块并绑定到服务器
users=[];//保存所有在线用户的昵称
app.use('/', express.static(__dirname + 'footballLive.html')); //指定静态HTML文件的位置
server.listen(8088);
console.log('server started');

//socket部分
io.on('connection', function(socket) {
//昵称设置
socket.on('login', function(nickname) {
if (users.indexOf(nickname) > -1) {
socket.emit('nickExisted');
} else {
socket.userIndex = users.length;
socket.nickname = nickname;
users.push(nickname);
socket.emit('loginSuccess');
io.sockets.emit('system', nickname, users.length, 'login'); //向所有连接到服务器的客户端发送当前登陆用户的昵称

};

});

上面代码先判断接收到的昵称是否已经存在在users中，如果存在，则向自己发送一个nickExisted事件，在前端接收到这个事件后我们显示一条信息通知用户。

this.socket.on('nickExisted', function() {
document.getElementById('info').textContent = '!nickname is taken, choose another pls'; //显示昵称被占用的提示
});

如果昵称没有被其他用户占用，则将这个昵称压入users数组，同时将其作为一个属性存到当前socket变量中，并且将这个用户在数组中的索引（因为是数组最后一个元素，所以索引就是数组的长度users.length）也作为属性保存到socket中，后面会用到。最后向自己发送一个loginSuccess事件，通知前端登陆成功，前端接收到这个成功消息后将灰色遮罩层移除显示聊天界面。

this.socket.on('loginSuccess', function() {
document.getElementById('loginWrapper').style.display = 'none'; //隐藏遮罩层显聊天界面
document.getElementById('messageInput').focus(); //让消息输入框获得焦点
});

在线统计

这里实现显示在线用户数及在聊天主界面中以系统身份显示用户连接离开等信息

this.socket.on('system', function(nickName, userCount, type) {
//判断用户是连接还是离开以显示不同的信息
var msg = nickName + (type == 'login' ? '进入聊天室' : '离开');
var p = document.createElement('p');
p.textContent = msg;
document.getElementById('historyMsg').appendChild(p);
//将在线人数显示到页面顶部
document.getElementById('status').textContent = userCount + (userCount > 1 ? '' : '');
});

发送消息

用户连接以及断开我们需要显示系统消息，用户还要频繁的发送聊天消息，所以可以考虑将消息显示到页面这个功能单独写一个函数方便我们调用。为此我们向HiChat类中添加一个_displayNewMsg的方法，它接收要显示的消息，消息来自谁。

function _displayNewMsg(user, msg) {
var container = document.getElementById('historyMsg'),
content = document.getElementById('message'),
msgToDisplay = document.createElement('p'),
date = new Date().toTimeString().substr(0, 8);
//msgToDisplay.style.color = color || '#000';
msgToDisplay.innerHTML = '<span class="lvon">Lv1</span>' + '<span class="c-blue">' + user + '</span>' + '<span class="timespan">(' + date + '): </span>' + msg;
container.appendChild(msgToDisplay);
container.scrollTop = container.scrollHeight;
content.scrollTop = content.scrollHeight;
}

有了这个显示消息的方法后，下面就开始实现用户之间的聊天功能了。

做法也很简单，如果你掌握了上面所描述的emit发送事件，on接收事件，那么用户聊天消息的发送接收也就轻车熟路了。

首先为页面的发送按钮写一个click事件处理程序，我们通过addEventListner来监听这个click事件，当用户点击发送的时候，先检查输入框是否为空，如果不为空，则向服务器发送postMsg事件，将用户输入的聊天文本发送到服务器，由服务器接收并分发到除自己外的所有用户。

将以下代码添加到hichat.js的inti方法中。

document.getElementById('sendBtn').addEventListener('click', function() {
var messageInput = document.getElementById('messageInput'),
msg = messageInput.value;
messageInput.value = '';
messageInput.focus();
if (msg.trim().length != 0) {
that.socket.emit('postMsg', msg); //把消息发送到服务器
_displayNewMsg('我', msg); //把自己的消息显示到自己的窗口中
};
}, false);

在server.js中添加代码以接收postMsg事件。

io.on('connection', function(socket) {
    //其他代码。。。

    //接收新消息
    socket.on('postMsg', function(msg) {
        //将消息发送到除自己外的所有用户
        socket.broadcast.emit('newMsg', socket.nickname, msg);
    });
});
 然后在客户端接收服务器发送的newMsg事件，并将聊天消息显示到页面。

this.socket.on('newMsg', function(user, msg) {
    that._displayNewMsg(user, msg);
});
运行程序，现在可以发送聊天消息了。

按键操作

将以下代码添加到hichat.js的inti方法中，这样在输入昵称后，按回车键就可以登陆，进入聊天界面后，回车键可以发送消息。

//按回车键发送消息
document.getElementById('nicknameInput').addEventListener('keyup', function(e) {
if (e.keyCode == 13) {
var nickName = document.getElementById('nicknameInput').value;
if (nickName.trim().length != 0) {
that.socket.emit('login', nickName);
};
};
}, false);

document.getElementById('messageInput').addEventListener('keyup', function(e) {
var messageInput = document.getElementById('messageInput'),
msg = messageInput.value;
//color = document.getElementById('colorStyle').value;
if (e.keyCode == 13 && msg.trim().length != 0) {
messageInput.value = '';
that.socket.emit('postMsg', msg);
_displayNewMsg('我', msg);
};
}, false);

一个简单的聊天室就到这里了。

posted @ 2018-02-28 16:27 littlefairylulu 阅读(335) 评论(1) 收藏举报

刷新页面返回顶部