在很多需求業務中，都需要瀏覽器和服務器實時通信來實現功能，比如：掃碼登錄(掃碼后，手機確認登錄，PC網頁完成登錄并跳轉)、訂單語言提醒等，這些都是建立在兩端實時通信的基礎上的。對前端而言，來實現瀏覽器和服務器實時通信，最好的選擇就是Socket.IO庫，能夠快速的實現兩端實時通信功能。
1、什么是 Socket.IO?
Socket.IO 是一個WebSocket庫，可以在瀏覽器和服務器之間實現實時，雙向和基于事件的通信。它包括：Node.js服務器庫、瀏覽器的Javascript客戶端庫。它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實現網絡實時應用，非常方便和人性化，而且支持的瀏覽器最低達IE5.5
2、Socket.IO 主要特點
(1)、支持瀏覽器/Nodejs環境 (2)、支持雙向通信 (3)、API簡單易用 (4)、支持二進制傳輸 (5)、減少傳輸數據量
3、Vue.js 中 Socket.IO的使用
（1）客戶端
npm install vue-socket.io --save
main.js添加下列代碼
import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, // 服務器端地址 connection: 'http://localhost:3000', vuex: { }}))發送消息和監聽消息
//發送信息給服務端this.$socket.emit('login',{ username: 'username', password: 'password'});//接收服務端的信息this.sockets.subscribe('relogin', (data) => { console.log(data)})（2）服務端
服務端，我們基于express搭建node服務器。
npm install --save expressnpm 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.send('<h1>你好web秀</h1>');}); io.on('connection',function(socket) { //接收數據 socket.on('login', function (obj) { console.log(obj.username); // 發送數據 socket.emit('relogin', { msg: `你好${obj.username}`, code: 200 }); });}); http.listen(3000, function(){ console.log('listening on *:3000');});然后啟動服務端服務
node index.js
客戶端即可查看效果。
4、Socket.IO有哪些事件
io.on('connect', onConnect);function onConnect(socket){ // 發送給當前客戶端 socket.emit( 'hello', 'can you hear me?', 1, 2, 'abc' ); // 發送給所有客戶端，除了發送者 socket.broadcast.emit( 'broadcast', 'hello friends!' ); // 發送給同在 'game' 房間的所有客戶端，除了發送者 socket.to('game').emit( 'nice game', "let's play a game" ); // 發送給同在 'game1' 或 'game2' 房間的所有客戶端，除了發送者 socket.to('game1').to('game2').emit( 'nice game', "let's play a game (too)" ); // 發送給同在 'game' 房間的所有客戶端，包括發送者 io.in('game').emit( 'big-announcement', 'the game will start soon' ); // 發送給同在 'myNamespace' 命名空間下的所有客戶端，包括發送者 io.of('myNamespace').emit( 'bigger-announcement', 'the tournament will start soon' ); // 發送給指定 socketid 的客戶端（私密消息） socket.to(<socketid>).emit( 'hey', 'I just met you' ); // 包含回執的消息 socket.emit( 'question', 'do you think so?', function (answer) {} ); // 不壓縮，直接發送 socket.compress(false).emit( 'uncompressed', "that's rough" ); // 如果客戶端還不能接收消息，那么消息可能丟失 socket.volatile.emit( 'maybe', 'do you really need it?' ); // 發送給當前 node 實例下的所有客戶端（在使用多個 node 實例的情況下） io.local.emit( 'hi', 'my lovely babies' );};以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
