anjia
commented
5 years ago Socket.IO
它是一个 JavaScript framework。
支持实时、双向和基于事件的通信。它适用于每个平台、浏览器和设备，可靠性和速度也不错。
Socket.IO enables real-time, bidirectional and event-based communication.
- real-time analytics 实时分析
- 把数据实时推送到客户端，以备实时分析
- instant messaging and chat 即时消息和聊天
- 实时聊天~
- binary streaming 二进制流
- 可来回发送各种 blob：image, video, autio
- document collaboration 文档合作
- 可多用户编辑文档
入门
Sockets（套接字）是大多数 real-time chat systems 用的解决方案，能在 client 和 server 之间提供双向通信通道。这样 server 就能给 clients 推送消息了。
通常的思路是：客户端发送了个消息，服务器取到它，再讲它推送到所有其他连接的 clients。
当然，也可以轮询服务器、跟踪 timestamps，但效率比较低
1. 使用 Socket.IO
Socket.IO 由两部分组成：
socket.io：一个和 Node.JS HTTP Server 集成的 serversocket.io-client：一个在浏览器端加载的 client librarysocket.io会自动为 client 服务
2. Emitting events
Socket.IO 背后的思想是你可以 send 和 receive 任何 events，数据也不限。 任何能 encode 成 JSON 的数据都可以，binary data 也可以。
3. Broadcasting
目的：从 server 把事件 emit 到其它所有的 users
- 给所有人发 event
io.emit('some event', { for: 'everyone' }); - 给除了某个 certain socket 的所有人发送，用
socket.broadcast.emitio.on('connection', function(socket){ socket.broadcast.emit('hi'); });
完整代码
client 端的代码示例：
const socket = io();
// 1.会加载 socket.io-client, 且会连接
// defaults to trying to connect to the host that serves the page
const msgIpt = $('#m');
$('form').submit(function(){
socket.emit('chat message', msgIpt.val());
// 2.发送事件 'chat message'
msgIpt.val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});// 3.接收服务器转发/推送的消息server 端的代码示例：
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
// 1.初始化一个新的 socket.io 实例, 参数是 HTTP server 对象
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
// 3.每个 socket 都有一个 'disconnect' 事件
// ...每次刷新页面，都是先 disconnect 再 connect
socket.on('chat message', function(msg){
console.log('message: ' + msg);
io.emit('chat message', msg); // 5.向所有人发送该消息
});// 4.自定义的事件 'chat message'
});
// 2.监听 'connection' 事件，当有进来的 sockets 时会触发
http.listen(3000, function(){
console.log('listening on *:3000');
});
copywrite
Vue-Socket.io 是一个 Vuejs 的 socket.io 集成。
https://github.com/MetinSeylan/Vue-Socket.io