Node.js + Web Socket 打造即时聊天程序嗨聊（上）
前端一直是一块充满惊喜的土地，不仅是那些富有创造性的页面，还有那些惊赞的效果及不断推出的新技术。像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端。瞬间就有了一统天下的感觉，来往穿梭于前后端之间代码敲得飞起，从此由前端晋升为’前后端’。
图片来自G+
本文将使用Node.js加web socket协议打造一个网页即时聊天程序，取名为HiChat，中文翻过来就是’嗨聊’，听中文名有点像是专为寂寞单身男女打造的~
其中将会使用到express和socket.io两个包模块，下面会有介绍。
源码&演示
在线演示 (heroku服务器网速略慢且免费套餐是小水管，建议下载代码本地运行)
源码可访问项目的GitHub页面下载
本地运行方法：
命令行运行npm install
模块下载成功后，运行node server启动服务器
打开浏览器访问localhost
下图为效果预览：
准备工作
本文示例环境为Windows，Linux也就Node的安装与命令行稍有区别，程序实现部分基本与平台无关。
Node相关
你需要在本机安装Node.js（废话）
多少需要一点Node.js的基础知识，如果还未曾了解过Node.js，这里有一篇不错的入门教程
然后我们就可以开始创建一个简单的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.οnclick=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’字符串。
一如之前所说，socket.io在前后端的句法是一致的，所以相反地，从服务器发送事件到客户端，在客户端接收并处理消息也是显而易见的事件了。这里只是简单介绍，具体下面会通过发送聊天消息进一步介绍。
基本页面
有了上面一些基础的了解，下面可以进入聊天程序功能的开发了。
首先我们构建主页面。因为是比较大众化的应用了，界面不用多想，脑海中已经有大致的雏形，它有一个呈现消息的主窗体，还有一个输入消息的文本框，同时需要一个发送消息的按钮，这三个是必备的。
另外就是，这里还准备实现以下四个功能，所以界面上还有设置字体颜色，发送表情，发送图片和清除记录四个按钮。
最后的页面也就是先前截图展示的那们，而代码如下：
www/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Wayou">
<meta name="description" content="hichat | a simple chat application built with node.js and websocket">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hichat</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<div class="banner">
<h1>HiChat :)</h1>
<span id="status"></span>
</div>
<div id="historyMsg">
</div>
<div class="controls" >
<div class="items">
<input id="colorStyle" type="color" placeHolder='#000' title="font color" />
<input id="emoji" type="button" value="emoji" title="emoji" />
<label for="sendImage" class="imageLable">
<input type="button" value="image" />
<input id="sendImage" type="file" value="image"/>
</label>
<input id="clearBtn" type="button" value="clear" title="clear screen" />
</div>
<textarea id="messageInput" placeHolder="enter to send"></textarea>
<input id="sendBtn" type="button" value="SEND">
<div id="emojiWrapper">
</div>
</div>
</div>
<div id="loginWrapper">
<p id="info">connecting to server...</p>
<div id="nickWrapper">
<input type="text" placeHolder="nickname" id="nicknameInput" />
<input type="button" value="OK" id="loginBtn" />
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="scripts/hichat.js"></script>
</body>
</html>
样式文件 www/styles/main.css
html, body {
margin: 0;
background-color: #efefef;
font-family: sans-serif;
}
.wrapper {
width: 500px;
height: 640px;
padding: 5px;
margin: 0 auto;
background-color: #ddd;
}
#loginWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(5, 5, 5, .6);
text-align: center;
color: #fff;
display: block;
padding-top: 200px;
}
#nickWrapper {
display: none;
}
.banner {
height: 80px;
width: 100%;
}
.banner p {
float: left;
display: inline-block;
}
.controls {
height: 100px;
margin: 5px 0px;
position: relative;
}
#historyMsg {
height: 400px;
background-color: #fff;
overflow: auto;
padding: 2px;
}
#historyMsg img {
max-width: 99%;
}
.timespan {
color: #ddd;
}
.items {
height: 30px;
}
#colorStyle {
width: 50px;
border: none;
padding: 0;
}
/*custom the file input*/
.imageLable {
position: relative;
}
#sendImage {
position: absolute;
width: 52px;
left: 0;
opacity: 0;
overflow: hidden;
}
/*end custom file input*/
#messageInput {
width: 440px;
max-width: 440px;
height: 90px;
max-height: 90px;
}
#sendBtn {
width: 50px;
height: 96px;
float: right;
}
#emojiWrapper {
display: none;
width: 500px;
bottom: 105px;
position: absolute;
background-color: #aaa;
box-shadow: 0 0 10px #555;
}
#emojiWrapper img {
margin: 2px;
padding: 2px;
width: 25px;
height: 25px;
}
#emojiWrapper img:hover {
background-color: blue;
}
.emoji{
display: inline;
}
footer {
text-align: center;
}
为了让项目有一个良好的目录结构便于管理，这里在www文件夹下又新建了一个styles文件夹存放样式文件main.css，然后新建一个scripts文件夹存放前端需要使用的js文件比如hichat.js（我们前端所有的js代码会放在这个文件中），而我们的服务器js文件server.js位置不变还是放在最外层。
同时再新建一个content文件夹用于存放其他资源比如图片等，其中content文件夹里再建一个emoji文件夹用于存入表情gif图，后面会用到。最后我们项目的目录结构应该是这样的了：
├─node_modules
└─www
├─content
│ └─emoji
├─scripts
└─styles
此刻打开页面你看到的是一个淡黑色的遮罩层，而接下来我们要实现的是用户昵称的输入与服务器登入。这个遮罩层用于显示连接到服务器的状态信息，而当连接完成之后，会出现一个输入框用于昵称输入。
上面HTML代码里已经看到，我们将www/scripts/hichat.js文件已经引入到页面了，下面开始写一些基本的前端js开始实现连接功能。
定义一个全局变量用于我们整个程序的开发HiChat，同时使用window.onload在页面准备好之后实例化HiChat，调用其init方法运行我们的程序。
www/scripts/Hichat.js
window.onload = function() {
//实例并初始化我们的hichat程序
var hichat = new HiChat();
hichat.init();
};
//定义我们的hichat类
var HiChat = function() {
this.socket = null;
};
//向原型添加业务方法
HiChat.prototype = {
init: function() {//此方法初始化程序
var that = this;
//建立到服务器的socket连接
this.socket = io.connect();
//监听socket的connect事件，此事件表示连接已经建立
this.socket.on('connect', function() {
//连接到服务器后，显示昵称输入框
document.getElementById('info').textContent = 'get yourself a nickname :)';
document.getElementById('nickWrapper').style.display = 'block';
document.getElementById('nicknameInput').focus();
});
}
};
上面的代码定义了整个程序需要使用的类HiChat，之后我们处理消息显示消息等所有业务逻辑均写在这个类里面。
首先定义了一个程序的初始化方法，这里面初始化socket，监听连接事件，一旦连接到服务器，便显示昵称输入框。当用户输入昵称后，便可以在服务器后台接收到然后进行下一步的处理了。
设置昵称
我们要求连接的用户需要首先设置一个昵称，且这个昵称还要唯一，也就是不能与别人同名。一是方便用户区分，二是为了统计在线人数，同时也方便维护一个保存所有用户昵称的数组。
为此在后台server.js中，我们创建一个名叫users的全局数组变量，当一个用户设置好昵称发送到服务器的时候，将昵称压入users数组。同时注意，如果用户断线离开了，也要相应地从users数组中移除以保证数据的正确性。
在前台，输入昵称点击OK提交后，我们需要发起一个设置昵称的事件以便服务器侦听到。将以下代码添加到之前的init方法中。
www/scripts/hichat.js
//昵称设置的确定按钮
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'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
users=[];//保存所有在线用户的昵称
app.use('/', express.static(__dirname + '/www'));
server.listen(80);
//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); //向所有连接到服务器的客户端发送当前登陆用户的昵称
};
});
});
需要解释一下的是，在connection事件的回调函数中，socket表示的是当前连接到服务器的那个客户端。所以代码socket.emit(‘foo’)则只有自己收得到这个事件，而socket.broadcast.emit(‘foo’)则表示向除自己外的所有人发送该事件，另外，上面代码中，io表示服务器整个socket连接，所以代码io.sockets.emit(‘foo’)表示所有人都可以收到该事件。
上面代码先判断接收到的昵称是否已经存在在users中，如果存在，则向自己发送一个nickExisted事件，在前端接收到这个事件后我们显示一条信息通知用户。
将下面代码添加到hichat.js的inti方法中。
www/scripts/hichat.js
this.socket.on('nickExisted', function() {
document.getElementById('info').textContent = '!nickname is taken, choose another pls'; //显示昵称被占用的提示
});
如果昵称没有被其他用户占用，则将这个昵称压入users数组，同时将其作为一个属性存到当前socket变量中，并且将这个用户在数组中的索引（因为是数组最后一个元素，所以索引就是数组的长度users.length）也作为属性保存到socket中，后面会用到。最后向自己发送一个loginSuccess事件，通知前端登陆成功，前端接收到这个成功消息后将灰色遮罩层移除显示聊天界面。
将下面代码添加到hichat.js的inti方法中。
www/scripts/hichat.js
this.socket.on('loginSuccess', function() {
document.title = 'hichat | ' + document.getElementById('nicknameInput').value;
document.getElementById('loginWrapper').style.display = 'none';//隐藏遮罩层显聊天界面
document.getElementById('messageInput').focus();//让消息输入框获得焦点
});
在线统计
这里实现显示在线用户数及在聊天主界面中以系统身份显示用户连接离开等信息。
上面server.js中除了loginSuccess事件，后面还有一句代码，通过io.sockets.emit 向所有用户发送了一个system事件，传递了刚登入用户的昵称，所有人接收到这个事件后，会在聊天窗口显示一条系统消息’某某加入了聊天室’。同时考虑到在前端我们无法得知用户是进入还是离开，所以在这个system事件里我们多传递一个数据来表明用户是进入还是离开。
将server.js中login事件更改如下：
server.js
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');
};
});
较之前，多传递了一个login字符串。
作者：伯乐在线专栏作者 - 刘哇勇
转载于:https://my.oschina.net/u/3100313/blog/804335
Node.js + Web Socket 打造即时聊天程序嗨聊（上）相关推荐
- [前端] Node.js + Web Socket 打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
- Node.js + Web Socket 打造即时聊天程序嗨聊(1)
2019独角兽企业重金招聘Python工程师标准>>> 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文 ...
- 【Android】基于Socket的即时聊天（群聊）
近来感觉秋招无望,学习Socket的时候,便做了个基于Socket的群聊工具: 先看看最终效果吧 项目GitHub通道(详细代码请自行copy) 如何利用Socket通信 socket又称为" ...
- Elasticsearch：使用 Filebeat 从 Node.js Web 应用程序提取日志
本指南演示了如何从 Node.js Web 应用程序中提取日志并将它们安全地传送到 Elasticsearch Service 部署中. 你将设置 Filebeat 来监控具有标准 Elastic C ...
- node.js 程序_如何不使用外部程序包创建Node.js Web应用程序
node.js 程序 by Abhinav Pandey 通过Abhinav Pandey 如何不使用外部程序包创建Node.js Web应用程序 (How to create a Node.js w ...
- Node.js 指南（Docker化Node.js Web应用程序）
Docker化Node.js Web应用程序 此示例的目的是向你展示如何将Node.js应用程序放入Docker容器中,该指南旨在用于开发,而不用于生产部署,本指南还假设你有一个有效的Docker安装 ...
- Node.js Web开发框架
Node.js非常适用于Web开发,但是现在无论是一个网站,还是Web App都已经成为包括很多不同部分,如前端.数据库.业务模块.功能模块等等的大型项目,使用Node.js从零开始进行Web开发,也 ...
- 18个我最推荐的Node.js Web框架和工具
Node.js是一个底层平台.为了方便开发者的工作变得简单高效,社区诞生了超过上千个库. 随着时间的推移,有很多优秀的库可以供大家选择,下面是不完全选择列表: ExpressExpressExpres ...
- Node.js 和Socket.IO 实现chat
使用 Node.js 和 Socket.IO 构建简单的聊天程序 在node.js根目录下创建文件夹chat,里面添加两个文件:app.js和index.html app.js var fs = re ...
最新文章
- IE6动态插入option
- [转] 使用nginx sticky实现基于cookie的负载均衡
- 《自卑与超越》读书笔记(part2)--生活的不确定性正是我们希望的来源
- linux 统计当前目录下文件或者文件夹的数量
- Worktile协同特色之二：任务看板管理
- 如何解除服务器注册,《天龙八部手游》服务器注册上限怎么办 服务器注册方法...
- delphi pid判断进程结束_PHP7是如何实现多进程的？
- 挑战杯获奖作品_我校学生参加河北省“挑战杯”竞赛获奖作品展示二
- 深度学习模型压缩方法
- Python基础——字典(dictionary)
- MySQL连接问题 --- （1251：Client does not support ...）
- Mybatis mapper.xml中常用标签详解
- 给定一个字符串，求第一个不重复的字符
- J2ME开发入门专题系列之一：J2ME概述
- F28335的ePWM模块
- 微信小程序云开发（云数据库的使用）
- 爱思助手更新后无法连接服务器,爱思助手无法连接手机怎么办 爱思助手连接失败问题解决办法...
- Java猫叫的方式,以【猫叫、老鼠跑、主人醒】为例子，使用 javascript 来实现 观察者模式 （有在线演示）...
- tcp 粘包 丢包 解决方案
- 足乐商城~~~~~~青龙脚本