[客户端安装 | 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); ```