关注我们

Socket.IO - 应用示例

创建一个名为 app.js 的文件，然后输入以下代码来设置快速应用程序-

var app=require('express')();
var http=require('http').Server(app);

app.get('/'， function(req， res) {
   res.sendfile('index.html');
});

http.listen(3000， function() {
   console.log('listening on *:3000');
});

我们需要一个 index.html 文件来提供服务，创建一个名为index.html的新文件，并在其中输入以下代码-

<!DOCTYPE html>
<html>
   <head>
      <title>LearnFk Hello Learnfk</title>
   </head>
   <body>Hello LearnFk</body>
</html>

要测试是否有效，请转到终端并使用以下命令运行此应用程序-

nodemon app.js

这将在localhost:3000上运行服务器。转到浏览器并输入localhost:3000进行检查。

无涯教程网

这将设置我们的快速应用程序，并且现在在根路由上提供HTML文件。现在，我们将需要Socket.IO并在每次用户转到此页面时记录"A user connected"，并在每次有人浏览/关闭此页面时记录"A user disconnected"。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
   res.sendfile('index.html');
});

//Whenever someone connects this gets executed
io.on('connection', function(socket) {
   console.log('A user connected');

   //Whenever someone disconnects this piece of code executed
   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

http.listen(3000, function() {
   console.log('listening on *:3000');
});

require('socket.io')(http)创建一个附加到http服务器的新socket.io。 io.on事件处理程序使用Socket对象处理其中的连接，断开等事件。

我们已经将服务器设置为记录有关连接和断开连接的消息。现在，我们必须包括客户端脚本并在那里初始化Socket对象，以便客户端可以在需要时创建连接。该脚本由我们的 io服务器提供，位于'/socket.io/socket.io.js'。

完成上述过程后，index.html文件将如下所示-

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Learnfk</title>
   </head>
   <script src="/socket.io/socket.io.js"></script>
   
   <script>
      var socket=io();
   </script>
   <body>Hello Learnfk</body>
</html>

如果现在转到localhost:3000(确保服务器正在运行)，则会在浏览器中显示 Hello Learnfk ，现在检查您的服务器控制台日志，它将显示以下消息-

A user connected

如果刷新浏览器，它将断开Socket连接并重新创建。您可以在控制台日志中看到以下内容-

A user connected
A user disconnected
A user connected

现在，我们可以使用Socket连接了。这是在Socket.IO中设置连接的容易程度。

链接：https://www.learnfk.comhttps://www.learnfk.com/socket.io/socket.io-hello-world.html

来源：LearnFk无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

现代React Web开发实战 -〔宋一玮〕

徐昊 · AI 时代的软件工程 -〔徐昊〕

工程师个人发展指南 -〔李云〕

好记忆不如烂笔头。留下您的足迹吧 :)