转自:https://www.w3cschool.cn/socket/socket-ulbj2eii.html
简介
使用流行的 web 应用技术栈 —— 比如 LAMP (PHP) —— 来编写聊天应用通常是很困难的。它包含了轮询服务器以检测变化,还要追踪时间戳,并且这种实现是比较慢的。
大多数实时聊天系统通常基于 socket 来构建。 Socket 为客户端和服务器提供了双向通信机制。
这意味着服务器可以 推送 消息给客户端。无论何时你发布一条消息,服务器都可以接收到消息并推送给其他连接到服务器的客户端。
web 框架
首先要制作一个 HTML 页面来提供表单和消息列表。我们使用了基于 Node.JS 的 web 框架 express 。 请确保安装了 Node.JS。
首先创建一个 package.json 来描述我们的项目。 推荐新建一个空目录 (这里使用 chat-example)。
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
要保存 dependencies 信息, 可以用 npm install --save:
npm install --save express@4.15.2
express 已经安装好了。我们现在新建一个 index.js 文件来创建应用。
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('
Hello world
');});
http.listen(3000, function(){
console.log('listening on *:3000');
});
这段代码作用如下:
Express 初始化 app 作为 HTTP 服务器的回调函数 (见第 2 行)。定义了一个路由 / 来处理首页访问。使 http 服务器监听端口 3000。
运行 node index.js 就可以看到如下画面:
在浏览器中访问 http://localhost:3000:
HTML 服务器
目前在 index.js 中我们是通过 res.send 返回一个 HTML 字符串。 如果我们将整个应用的 HTML 代码都放到应用代码里,代码结构将变得很混乱。 替代的方法是新建一个 index.html 文件作为服务器响应。
现在我们用 sendFile 来重构之前的回调:
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
index.html 内容如下:
Socket.IO chat* { 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; }
Send
现在重启进程 (按 Control+C ,然后再次运行 node index) ,刷新页面显示如下:
集成 Socket.IO
Socket.IO 由两部分组成:
一个服务端用于集成 (或挂载) 到 Node.JS HTTP 服务器: socket.io一个加载到浏览器中的客户端: socket.io-client
开发环境下, socket.io 会自动提供客户端。正如我们所见,到目前为止,我们只需要安装一个模块:
npm install --save socket.io
这会安装模块并添加依赖到 package.json。在 index.js 文件中添加该模块:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
我们通过传入 http (HTTP 服务器) 对象初始化了 socket.io 的一个实例。 然后监听 connection 事件来接收 sockets, 并将连接信息打印到控制台。
在 index.html 的