微课弹幕小工具——Electron接收端实现

2023-09-22 01:13:16

在上一篇文章中，我们介绍了即将实现的弹幕小工具，以及所采用的技术方案。现在，让我们一步步将想法落地成代码。

在这篇教程中，我们将使用Electron来实现接收端，让弹幕在屏幕上飞起来。

首先，我们需要创建一个新的Electron项目。我们可以使用以下命令：

npx create-electron-app electron-danmaku-receiver

这将创建一个新的Electron项目，并在项目目录中安装必要的依赖项。

接下来，我们需要安装一些额外的依赖项。这些依赖项包括：

npm install socket.io
npm install express

这些依赖项将用于创建服务器和处理来自小程序客户端的请求。

安装完依赖项后，我们需要修改项目的package.json文件。我们需要添加以下代码：

"main": "main.js",
"scripts": {
  "start": "electron main.js"
},
"dependencies": {
  "socket.io": "^4.4.0",
  "express": "^4.17.1"
}

这将告诉Electron使用main.js作为入口文件，并将其作为脚本启动。

现在，我们需要创建main.js文件。这是一个JavaScript文件，它将作为Electron应用程序的入口点。

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  socket.on('message', (data) => {
    io.emit('message', data);
  });
});

server.listen(3000);

此代码创建了一个Express应用程序并启动了一个HTTP服务器。它还创建了一个Socket.IO服务器并监听连接。当客户端连接到服务器时，它将监听名为“message”的事件。当收到“message”事件时，它将使用Socket.IO将数据广播给所有连接的客户端。

最后，我们需要创建一个index.html文件。这是一个HTML文件，它将作为Electron应用程序的窗口。

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>弹幕小工具</h1>
    <div id="danmaku-container"></div>
    <script src="socket.io.js"></script>
    <script>
      const socket = io();

      socket.on('message', (data) => {
        const danmaku = document.createElement('div');
        danmaku.classList.add('danmaku');
        danmaku.innerHTML = data;

        document.getElementById('danmaku-container').appendChild(danmaku);
      });
    </script>
  </body>
</html>