[客戶端安裝 | Socket.IO](https://socket.io/zh-CN/docs/v4/client-installation/) >[info]Socket.io 和 WebSocket 是兩種用于實現實時通訊的技術，它們之間有一些區別： >1. WebSocket 是一種在客戶端和服務器之間建立持久性連接的協議，它允許雙向通訊，可以實現服務器向客戶端推送消息，也可以實現客戶端向服務器發送消息。WebSocket 協議是 HTML5 的一部分，通過在客戶端和服務器之間建立一個持久性連接，可以實現實時通訊的功能。 >2. Socket.io 是一個建立在 WebSocket 之上的實時通訊庫，它提供了對 WebSocket 的封裝，使得在不同瀏覽器和環境下都能夠實現實時通訊。Socket.io 不僅支持 WebSocket，還支持其他實時通訊的技術，如輪詢、長輪詢等，以保證在不同環境下都能夠實現實時通訊的功能。Socket.io 也提供了一些額外的功能，如斷線重連、廣播消息等，使得實時通訊更加穩定和靈活。 總的來說，WebSocket 是一種協議，而 Socket.io 是一個建立在 WebSocket 之上的實時通訊庫，它們都可以用于實現實時通訊的功能，但 Socket.io 提供了更多的功能和兼容性，適用于更廣泛的應用場景。 ## **socket.io語法** 使用emit(eventName,data)，發送數據，第一個參數為自定義的事件名稱；第二個參數為要發送的數據； 使用on(eventName,fn)，接收數據，第一個參數為發送時的事件名稱；第二個參數是一個回調函數，它的參數為接收到的數據； ``` //客戶端開啟連接 var socket = io('http://localhost:3000'); //服務端開啟連接 var server = require('http').createServer(); var socket=require("socket.io")(server); server.listen(3000); //發送數據 socket.emit('hello', {name:"xiaoming",age:18}); //接收數據 socket.on('hello', function (data) { console.log(data); //{name:"xiaoming",age:18} }) ``` ## **socket.io使用** 客戶端使用 方式一： 前端html頁面中引入js文件， socket.io.js文件 CDN地址：https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js ``` <script src="./socket.io.js"></script> ``` 方式二： ES6中可以使用npm install socket.io --save安裝socket.io 然后使用 import 導入 ``` import io from 'socket.io-client'; ``` js代碼： ``` //連接服務器端 let socket=io("http://localhost:3000"); //連接成功后，回調函數 socket.on("connect",()=>{ console.log("connect .....") }) //通過emit發送消息給服務端 socket.emit("message",{name:"xiaoming",age:18}); //通過on監聽服務器端返回的數據 socket.on("news",(msg)=>{ console.log(msg); //ok }) ``` ## **服務端使用** 使用nodeJs來寫服務端 在終端中執行`npm install socket.io --save`安裝socket.io 使用 require 導入到模塊中 ``` var http = require('http'); var server = http.createServer(); //開啟socket.io服務 var io=require("socket.io")(server); //連接成功后，執行回調函數 io.on("connection",(client)=>{ console.log("connection ...") //發送數據到客戶端 client.emit("news","ok") //接收客戶端發送過來的數據 client.on("message",(msg)=>{ console.log(msg); //{name:"xiaoming",age:18} }) }) server.listen(3000); ```