Javascript Web套接字从一个客户端发送数据_Javascript_Html_Node.js_Websocket

Javascript Web套接字从一个客户端发送数据

javascript html node.js websocket

Javascript Web套接字从一个客户端发送数据,javascript,html,node.js,websocket,Javascript,Html,Node.js,Websocket,所以我正在尝试制作一个视频流网站，人们可以一起观看视频。在我看来，我希望每个人都能同步到连接到websocket的“主客户端”，这将是第一个来连接到websocket的人我有一个真正的基本websocket设置，但我不知道如何将主客户端的视频时间（videoPlayer.currentTime（））发送给任何加入并将其播放机设置为该时间的新用户（player1.currentTime（这里有时间参数））。下面是我使用video.js创建的简单websocket和HTML页面的代码。我尝试过诸如

所以我正在尝试制作一个视频流网站，人们可以一起观看视频。在我看来，我希望每个人都能同步到连接到websocket的“主客户端”，这将是第一个来连接到websocket的人

我有一个真正的基本websocket设置，但我不知道如何将主客户端的视频时间（videoPlayer.currentTime（））发送给任何加入并将其播放机设置为该时间的新用户（player1.currentTime（这里有时间参数））。下面是我使用video.js创建的简单websocket和HTML页面的代码。我尝试过诸如：ws.send（ws）或ws.send（videoPlayer.currentTime（））之类的方法，但我遇到了很多问题，这些问题没有定义或无法发送

我的项目结构很简单：index.html，然后是一个包含index.js文件的服务器文件夹

// Web Socket Setup 
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 5051 });

var CLIENTS = [];
var MASTER_CLIENT;
var viewers = 0;

wss.on("connection", ws => {
    console.log("A new client has connected.");

    CLIENTS.push(ws);
    viewers++;
    ws.id = viewers;

    // Sets the master client
    if (CLIENTS.length == 1) {
        MASTER_CLIENT = ws;
    }

    console.log(viewers);

    ws.on("message", data => {
        console.log(`Client has sent us: ${data}`);
    });

    ws.on("close", () => {
        viewers--;
        console.log("A client has disconnected.");   
    });
});



若要查看此视频，请启用JavaScript，并考虑升级到
网络浏览器

//媒体播放器设置
var videoPlayer=videojs（document.querySelector（'.videojs'））；
const ws=newwebsocket（“ws://localhost:5051”）；
ws.addEventListener（“打开的”，（）=>{
log（“我们已连接”）；
});
ws.addEventListener（“消息”，e=>{
log（`Server已向我们发送：${e.data}`）；
});

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">

        <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
        <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
    </head>
    <body>
        <video
        id="main-video"
        class="video-js"
        controls autoplay
        preload="auto"
        muted="muted"
        poster="//vjs.zencdn.net/v/oceans.png"
        >
        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
        <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
        <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
        <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
        </a>
        </p>
        </video>

        <script>
        // Media Player Setup
        var videoPlayer = videojs(document.querySelector('.video-js'));
        </script>

        
        <script> 
            const ws = new WebSocket("ws://localhost:5051");

            ws.addEventListener("open", () => {
                console.log("We are connected.");
            });

            ws.addEventListener("message", e => {
                console.log(`Server has sent us: ${e.data}`);
            });
        </script>

        <script src="control.js" async defer></script>
    
    </body>
</html>