1.1、Socket.IO 是什么
Socket.IO是一个库,基于 Node.js 的实时应用程序框架。可以在浏览器和服务器之间实现实时,双向和基于事件的通信。
1.2、 socket.io有什么特点
-
易用性:socket.io封装了服务端和客户端,使用起来非常简单方便。
-
跨平台:socket.io支持跨平台,这就意味着你有了更多的选择,可以在自己喜欢的平台下开发实时应用。
-
自适应:它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5。
1.3 起源
WebSocket 的产生源于 Web 开发中日益增长的实时通信需求,对比基于 http 的轮询方式,它大大节省了网络带宽,同时也降低了服务器的性能消耗。
WebSocket 协议在2008年诞生,2011年成为国际标准。虽然主流浏览器都已经支持,但仍然可能有不兼容的情况,为了兼容所有浏览器,就诞生SocketIO。
SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口,也就是说,我们在使用SocketIO时,不用担心兼容问题,底层会自动选用最佳的通信方式。
二、socketIO简单示例
2.1 初始化项目
mkdir socket
cd socket
npm init -y
2.2 安装依赖
npm install socket.io express path --save-dev
OR
yarn add socket.io express path --save-dev
2.3 使用Express
原因
-
websocket 依赖http服务器
-
我们需要创建一个http的服务器,提供握手,静态文件服务等功能
创建app.js
文件
let express = require('express')
let path = require('path')
let app = express()
app.use(express.static(__dirname))
app.get('/', function(req, res) {
res.sendFile(path.resolve(__dirname, 'index.html'))
})
let server = require('http').createServer(app)
server.listen(5050)
let io = require('socket.io')(server)
io.on('connection', function(socket) {
console.log('客户端已经连接')
socket.on('message', function(msg) {
console.log(msg)
socket.send('服务端 ' + msg)
})
})
创建index.html
文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="/socket.io/socket.io.js"></script>
<script>
window.onload = function () {
var socket = io.connect('/');
//监听与服务器端的连接成功事件
socket.on('connect', function () {
console.log('客服端连接成功');
});
// 客服端收到服务器发过来的消息后
socket.on('message', function (message) {
console.log('客服端接收消息 ' + message);
});
//监听与服务器端断开连接事件
socket.on('disconnect', function () {
console.log('断开连接');
});
};
</script>
</body>
</html>