WebSocket 简介
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
为什么传统的HTTP协议不能做到WebSocket实现的功能?这是因为HTTP协议是一个请求-响应协议,请求必须先由浏览器发给服务器,服务器才能响应这个请求,再把数据发送给浏览器。换句话说,浏览器不主动请求,服务器是没法主动发数据给浏览器的。
Web
我们先用 express 搭一个基础的服务端。
创建 index.js 文件
var app = require('express')();var http = require('http').createServer(app);app.get('/', function(req, res){ res.send('
Hello world
');});http.listen(3000, function(){ console.log('listening on *:3000');});
run node index.js,并在浏览器打开 http://localhost:3000,访问成功即可看到
HTML
设计我们的主页,实现一个简单的聊天窗口。
修改 index.js
app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});
创建 index.html
Socket.IO chat
Send
重启应用并刷新页面你就可以看到一个如下图所示
Socket.io
引入socket.io
npm install --save socket.io
修改 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('an user connected');});http.listen(3000, function(){ console.log('listening on *:3000');});
修改 index.html,在