标签：聊天室 javascript socket.io html node.js
小编心语：大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐！！这一次要分享的东西小编也不是很懂啊，总之小编把它拿出来是觉地比较稀奇，而且程序也没有那么难，是一个比较简单的程序，大家可以多多试试~
简介：Socket.IO实现了实时双向的基于事件的通讯机制。旨在让各种浏览器与移动设备上实现实时app功能，模糊化各种传输机制。
下面我们使用Node.js和Socket.IO来做一个简单的聊天室。
一、初始化项目
（这个是在实验楼网站的虚拟平台需要实现的~可自动略过这一环节，不需要也可以的哈）
打开虚拟机终端，新建一个文件夹socketio，进入此文件夹使用npm初始化项目：
$ npm init
然后输入项目相关信息，也可以不输入，直接一路回车，完成后会在此目录下生产一个package.json文件。这个文件用于描述项目相关信息，以及声明项目中所使用的模块。
然后安装Socket.IO：
$ npm install socket.io --save
安装Socket.IO的时候，--save参数用于保存模块依赖信息到package.json文件，安装完后，打开package.json文件会看到里面多了一项内容：
"dependencies": { "socket.io": "^1.2.1"}
同时Socket.IO安装在了node_modules文件夹下。
二、创建http server
安装Socket.IO模块，我们现在先来创建一个可访问的页面吧。
在文件夹socketio中新建index.js文件，这就是在服务端运行的主文件。
首先在index.js中添加如下代码，引入所需的模块：
var http = require(‘http‘); // http 模块，用于创建http server var socketio = require(‘socket.io‘); // socket.io 模块 var fs = require(‘fs‘); // fs 模块，用于读取文件
然后通过http模块创建app，在index.js文件中添加代码：
// http.createServer()方法用于创建http server// 以处理来自浏览器的请求 var app = http.createServer(function(req, res) { // fs.readFile()方法用于读取文件 // 此处读取的是index.html文件 // 也就是我们后面要编写的HTML页面文件 fs.readFile(__dirname + ‘/index.html‘, function (err, data) { if (err) { res.writeHead(500); return res.end(‘Error loading index.html‘); } res.writeHead(200); // 返回请求状态码 res.write(data); // 返回读取到的内容给浏览器 res.end(); }); }).listen(8080); // listen()方法用监听http server到指定的地址和端口，默认地址是localhost
在文件夹socketio中新建index.html文件，代码如下：
<!doctype html><html> <head> <meta charset="utf-8"> <title>Socket.IO chat</title> </head> <body> Hello, shiyanlou. </body></html>
运行程序：
$ node index.js
然后打开虚拟机中的浏览器，访问“127.0.0.1:8080”浏览器页面中出现“Hello, shiyanlou.”，说明创建的http server成功了。
三、实现聊天
下面我们就来创建Socket.IO对象吧：
// 在与app相同的地址和端口上创建Socket.IO服务
var io = socketio(app);// 监听connection事件
// 当浏览器连接到此Socket.IO服务时触发该事件
io.on(‘connection‘, function (socket) {
// 监听浏览器端的chat事件
socket.on(‘chat‘, function (data) {
console.log(data);
});
});
这里在服务器端监听了来自浏览器的chat事件，后面我们会在index.html中实现此事件。
先来实现一个简单聊天界面吧，修改index.html文件中的代码如下所示：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
#form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
#form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
#form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<!-- 引入socket.io库和jQuery库 -->
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<!-- 显示消息记录 -->
<ul id="messages"></ul>
<!-- 消息发送框 -->
<div id="form">
<input id="m" autocomplete="off" /><button id="send">Send</button>
</div>
</body></html>
然后在浏览器端创建chat事件，在index.html文件中添加如下JavaScript代码：
<script>// 连接到Socket.IO服务器var socket = io.connect();
$(function() { // 绑定发按钮发送消息的事件
$(‘#send‘).on(‘click‘, function() {
var data = $(‘#m‘).val();
// 创建chat事件并发送消息给服务器
// emit(‘event‘) 表示发送了一个event命令
// 使用io.on(‘event‘)接收对应事件的信息
// 所以客户端服务器端需要使用socket.on(‘chat‘)接收聊天信息
socket.emit(‘chat‘, { msg: data });
$(‘#m‘).val(‘‘);
});
});</script>
现在运行项目：
$ node index.js
使用虚拟机中的浏览器访问“127.0.0.1:8080”，通过聊天框发送消息，会看到服务器端会打印出相应消息内容。
下面我们来实现把用户发送的消息发送给所有客户端，在index.js文件中创建sendmsg事件：
io.on(‘connection‘, function (socket) {
socket.on(‘chat‘, function (data) {
console.log(data);
// 创建sendmsg事件并把发送聊天消息给客户端
io.emit(‘sendmsg‘, data);
});
});客户端接收并显示消息，在index.html中添加JavaScript代码：
$(function() { // ...
// 接收消息并显示到消息记录框中
socket.on(‘sendmsg‘, function(msg) {
$(‘#messages‘).append($(‘<li>‘).text(msg.msg));
});
});
再重新运行项目：
$ node index.js
现在用浏览器打开多个页面，就能看到别人发送的消息了，这样一个简单的实时聊天室就实现了。
当然，你可以自己扩展这个项目，做一个功能更加完整的聊天室。
此项目主要用到了Socket.IO的emit()方法和on()方法，emit()方法用于创建和触发事件，on()方法用于监听事件。
更多详细步骤及内容请登录http://www.shiyanlou.com/courses/?course_type=project&tag=all
有更多基础课、项目课欢迎大家登陆实验楼官方网站http://www.shiyanlou.com。
现在登陆实验楼更有感恩好礼相送http://www.shiyanlou.com/huodong/thanks.html
本文出自 “实验楼” 博客，请务必保留此出处http://shiyanloucs.blog.51cto.com/9731842/1596249
标签：聊天室 javascript socket.io html node.js
原文地址：http://shiyanloucs.blog.51cto.com/9731842/1596249
