Node.js + Web Socket 打造即时聊天程序嗨聊

前端一直是一块充满惊喜的土地，不仅是那些富有创造性的页面，还有那些惊赞的效果及不断推出的新技术。像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端。瞬间就有了一统天下的感觉，来往穿梭于前后端之间代码敲得飞起，从此由前端晋升为'前后端'。

正镶白网站建设公司创新互联公司,正镶白网站设计制作，有大型网站制作公司丰富经验。已为正镶白上1000+提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的正镶白做网站的公司定做！

图片来自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('hello world!
'); //返回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与服务器进行通信了。

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

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

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

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

上述代码首先建立与服务器的连接，然后得到一个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在前后端的句法是一致的，所以相反地，从服务器发送事件到客户端，在客户端接收并处理消息也是显而易见的事件了。这里只是简单介绍，具体下面会通过发送聊天消息进一步介绍。

#p#

基本页面

有了上面一些基础的了解，下面可以进入聊天程序功能的开发了。

首先我们构建主页面。因为是比较大众化的应用了，界面不用多想，脑海中已经有大致的雏形，它有一个呈现消息的主窗体，还有一个输入消息的文本框，同时需要一个发送消息的按钮，这三个是必备的。

另外就是，这里还准备实现以下四个功能，所以界面上还有设置字体颜色，发送表情，发送图片和清除记录四个按钮。

***的页面也就是先前截图展示的那们，而代码如下：

www/index.html

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;
}

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();
});
}
};

//昵称设置的确定按钮
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);

//服务器及页面部分
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); //向所有连接到服务器的客户端发送当前登陆用户的昵称
};
});
});

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

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

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');
};
});

//断开连接的事件
socket.on('disconnect', function() {
//将断开连接的用户从users中删除
users.splice(socket.userIndex, 1);
//通知除自己以外的所有人
socket.broadcast.emit('system', socket.nickname, users.length, 'logout');
});

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

//向原型添加业务方法
HiChat.prototype = {
init: function() { //此方法初始化程序
//...
},
_displayNewMsg: function(user, msg, color) {
var container = document.getElementById('historyMsg'),
msgToDisplay = document.createElement('p'),
date = new Date().toTimeString().substr(0, 8);
msgToDisplay.style.color = color || '#000';
msgToDisplay.innerHTML = user + '(' + date + '): ' + msg;
container.appendChild(msgToDisplay);
container.scrollTop = container.scrollHeight;
}
};

this.socket.on('system', function(nickName, userCount, type) {
var msg = nickName + (type == 'login' ? ' joined' : ' left');
//指定系统消息显示为红色
that._displayNewMsg('system ', msg, 'red');
document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online';
});

document.getElementById('sendBtn').addEventListener('click', function() {
var messageInput = document.getElementById('messageInput'),
msg = messageInput.value;
messageInput.value = '';
messageInput.focus();
if (msg.tri
网站标题：Node.js + Web Socket 打造即时聊天程序嗨聊
链接地址：http://www.mswzjz.cn/qtweb/news39/261039.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能
贝锐智能技术为您推荐以下文章
网站营销知识
行业网站建设
成都网站建设　　　 UI设计　　　成都企业网站制作　　　成都广告安装公司　　　做网站公司　　　江油网站建设　　　四川发电机回收　　　青羊雕琢时光　　　电商网站　　　圣月阀门　　　做网站　　　做网站　　　成都网站推广公司　　　中国电信西部信息中心机房　　　成都免费建站　　　雅安电信机房　　　成都商城网站建设公司　　　网站建设　　　乐尚佳花箱　　　成都网站建设　　　

品质网站制作自适应网站开发成本低响应速度快多人服务好

028-86922220 13518219792

028-86922220 13518219792
网站建设QQ：532337155 营销推广QQ：631063699 网站制作QQ：532337155 营销推广QQ：631063699 售后QQ：1683211881
创新互联建站专注：攀枝花网站设计攀枝花网站制作攀枝花网站建设
地址：成都太升南路288号锦天国际A幢10楼

成都创新互联科技有限公司
Tel：028-86922220（7x24h）

Node.js + Web Socket 打造即时聊天程序嗨聊

源码&演示

准备工作

Node相关

Express

hello world!

socket.io

基本页面

HiChat :)

设置昵称

在线统计

发送消息