在上一篇讲了 npm 上最流行的 WebSocket 库之一的 ws 库，那么本篇就来讲另外一个，就是 socket.io 库，socket.io 其实是一个兼容方案，当浏览器不支持 H5 的情况下就不能够使用上一篇内容讲的 WebSocket ，只能采用其他的方案，socket.io 就解决了关于浏览器的兼容。
Node实现 Socket 通信 | WebSocket 通信 —— 浏览器原生支持
Socket.io 库地址： Socket.IO
下面来使用 socket.io 库来实现服务器与客户端的通信：
引入 Socket.io
打开 CMD 命令窗口切到待定目录下，使用如下命令进行安装 socket.io 库；
npm i socket.io
安装完成这里仅需要从 node_modules 中去找到一个 socket.io.js文件，路径如下:（后面会用到）
/node_modules/socket.io/client-dist/socket.io.js—— 客户端
这里的客户端界面还是使用前面所用的 html文件，使用script标签引入 socket.ios.js 之后就来进行与服务端接口的连接操作；这里为了不与 html 文件搞混，将其分离出来使用script标签引入；
SocketIO.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./socket.io.js" type="text/javascript"></script>
<script src="./SocketIOClient.js"></script>
<style>
.chatroom{
height: 400px;
width: 220px;
border: 1px solid blue;
padding: 5px;
overflow: scroll;
}
.footer{
margin-top: 10px;
}
</style>
</head>
<body>
<h3>Socket.IO 客户端</h3>
<div id="chatroom" class="chatroom"></div>
<div class="footer">
<input type="text" name="sayinput" id="sayinput" value="" />
<input type="button" name="send" id="sendbutton" value="发送" />
</div>
</body>
</html>SocketIOClient.js 文件 —— 接入服务端
var iosocket = null
window.onload = function () {
// 连接
iosocket = io.connect('http://127.0.0.1:9000')
iosocket.on('connect',function(){
iosocket.send('— — 已上线 — —')
})
// 收集
iosocket.on('message',function(message){
var chatroom = document.querySelector('#chatroom');
chatroom.innerHTML += '<br/>' + message
})
// 关闭
iosocket.on('disconnect',function(){
console.log('服务器关闭');
})
// 发送
function send(){
iosocket.send(sayinput.value)
sayinput.value = ''
}
// 回车
document.onkeyup = function (event) {
if (event.key = '13'){
send()
}
}
// 按钮
sendbutton.onclick = function () {
send()
}
}内容与之前讲过WebSocket的一些操作没有太大的差异处理，这里也不再过多赘述！
—— 服务端
安装 express 框架
引入 socket.io
var socket = require('socket.io')// 服务端
// var app = require('express')()
var express = require('express')
var app = express()
var http = require('http').Server(app)
// var socket = require('socket.io')
// var io = socket(http)
var io = require('socket.io')(http)
var fs = require('fs');
app.get('/', function (req, res) {
function callback(data) {
res.send(data.toString())
}
fs.readFile('./SocketIo.html', function (err, data) {
if (err) {
console.log(err);
callback('文件不存在')
} else {
callback(data)
}
})
})
// socket.io设置
// 在线用户
var onlineUsers = {}
var i = 0
io.on('connection', function (socket) {
console.log('有人连上来了~');
//监听新用户的加入
socket.name = '用户' + ++i
onlineUsers[socket.name] = socket
// 监听用户退出
socket.on('disconnect', function () {
console.log('有人退出');
delete onlineUsers[socket.name]
})
// 监听用户发布聊天内容
socket.on('message', function (msg) {
broadcast(msg, socket)
})
})
function broadcast(msg, socket) {
for (var key in onlineUsers) {
onlineUsers[key].send(socket.name + ' : ' + msg)
}
}
http.listen(9000, function () {
console.log('Port:9000 | Running ...');
})以上这么写会有什么问题，下面来测试一下：
服务端正常运行，下来来看一下客户端，通过浏览器访问 http://127.0.0.1:9000 ，会出现的是客户端的网页HTML文件(./SocketIO.html)；
可以使用静态资源进行托管，即在创建一个public文件夹，将托管文件放置到该文件夹下，使用如下命令：
app.use(express.static('public'))或者也可以这样，设置 app.get('/...') 这样的形式访问：
app.get('/SocketIOClient.js',function(req,res){
fs.readFile('./public/SocketIOClient.js',(err,data)=>{
res.send(data)
})
})
app.get('/socket.io.js',function(req,res){
fs.readFile('./public/socket.io.js',(err,data)=>{
res.send(data)
})
})
script标签
<script src="./socket.io.js" type="text/javascript"></script>
<script src="./SocketIOClient.js"></script>这里需要注意的就是这个script的请求路径问题了，在之前讲静态资源托管讲过了，可以回去翻阅温故，下面来测试一下：
再来开启一个客户端，使 用户2 上线：
分别来进行发送信息：
以上就是本篇的全部内容了，感谢大家的支持！如果前面有不理解的最后面附上完整的代码，需要注意的是相应的依赖包需要自行下载，express 和 socket.io ：文章来源：https://www.toymoban.com/news/detail-419941.html
// var app = require('express')()
var express = require('express')
var app = express()
// var http = require('http')
// var server = http.Server(app)
var server = require('http').Server(app)
// var socket = require('socket.io')
// var io = socket(http)
var io = require('socket.io')(server)
var fs = require('fs');
// app.use(express.static('public'))
app.get('/', function (req, res) {
function callback(data) {
res.send(data.toString())
}
fs.readFile('./SocketIo.html', function (err, data) {
if (err) {
console.log(err);
callback('文件不存在')
} else {
callback(data)
}
})
})
app.get('/SocketIOClient.js',function(req,res){
fs.readFile('./public/SocketIOClient.js',(err,data)=>{
res.send(data)
})
})
app.get('/socket.io.js',function(req,res){
fs.readFile('./public/socket.io.js',(err,data)=>{
res.send(data)
})
})
// socket.io设置
// 在线用户
var onlineUsers = {}
var i = 0
io.on('connection', function (socket) {
console.log('有人连上来了~');
//监听新用户的加入
socket.name = '用户' + ++i
onlineUsers[socket.name] = socket
// 监听用户退出
socket.on('disconnect', function () {
console.log('有人退出');
delete onlineUsers[socket.name]
})
// 监听用户发布聊天内容
socket.on('message', function (msg) {
broadcast(msg, socket)
})
})
function broadcast(msg, socket) {
for (var key in onlineUsers) {
onlineUsers[key].send(socket.name + ' : ' + msg)
}
}
server.listen(9000, function () {
console.log('Port:9000 | Running ...');
})
文章来源地址https://www.toymoban.com/news/detail-419941.html
到了这里，关于socket.io 解决浏览器兼容性（WebSocket）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
