关于websocket:syncplayer使用websocket实现异地同步播放视频

本文作者：星空有限
原文链接：https://liyangzone.com/2020/0…
GoEasy 已获作者受权转载，GoEasy 转载时有改变，感激作者的分享。

前段时间我有这样一个需要，想和一个异地的人一起看电影，先后在网上找了一些计划，不过那几个案都有一些毛病

• coplay: 一个浏览器插件，只能播放各大视频网站的视频，视频资源无限，我想要看的视频没有，比方一些经典电影和美剧之类
• 微光 APP: 还是下面的问题，而且只有手机端
• 向日葵等远程桌面: 受限于网络问题，卡顿很重大，体验不好

作为一个对用户体验有谋求的切图仔，我是一个下载党，看电影必须下载到本地看，根本不看视频网站上的玩意

那么有没有能实现同步播放本地文件的计划呢，答案是必定的，通过我的一些摸索和钻研，我实现了本地文件的同步播放，同时反对 PC 和手机端，而且还反对外挂字幕等高级性能，如何实现请往下看。

性能介绍 & 个性：

一个能够同步看视频的播放器，可用于异地同步观影、观剧，反对多人同时观看。
本我的项目有两个版本，web 版运行在浏览器上，可跨平台，不限操作系统、设施，性能简略实用于要求不高的用户。还有基于 SPlayer(射手影音)DIY 的客户端版本(windows、MAC)，播放 4K 高清文件、外挂字幕，通通没问题。

演示 demo:

web 版同步成果

客户端与 web 版同步成果

原理：

基于 websocket 实现，与一些用 websocket 实现的聊天室相似，只不过这个聊天室里的音讯换成了播放暂停的动作和工夫信息，客户端收到音讯后执行相应的动作: 播放、暂停、快进，以达到同时播放的成果。

我的项目所用到的

• node.js
• socketio
• HTML5 video API
• vue.js

如何应用：

本我的项目的外围是 websocket，所以至多须要一台服务器提供 websocket 服务，websocket 服务能够本人部署，能够应用第三方平台 GoEasy 提供的 websocket 服务。

1、本人部署：

websocket 服务器能够是一台具备公网 IP 的云服务器，也能够是一台具备公网 IP 的一般 PC，没有公网 IP 也能够。你也能够应用 zerotier 或其余 VPN 工具将两台设施组成一个大局域网，让它们能相互通信。websocket 服务器操作系统不限，只有有 node.js 环境。

websocket 服务端部署办法：装置 node.js 环境，将 server 目录挪动到服务器上，进入 server 目录，执行以下命令：

装置我的项目依赖包

# 装置我的项目依赖包

npm install 

# 启动 websocket 服务

node index.js

2、应用 GoEasy 的 websocket 服务

注册 GoEasy 开发者账号并创立一个利用，取得 appkey，复制到本我的项目相应地位即可。

GoEasy 官网：https://www.goeasy.io

无论是应用哪种 websocket 服务都能够，本我的项目写了两套代码，只需将不必的那套正文掉即可(默认 GoEasy)。

除了 websocket 服务器之外，还须要两个 http 服务端，一个是 web 服务端(提供 html、css、js 等文件的拜访)，一个是视频服务端(提供视频文件拜访)。

你能够将 web 服务部端署到以下地位：

• 具备公网 IP 的服务器
• github-pages 或国内的码云提供的动态 web 服务
• localhost(本地服务器)，同一个局域网内的设施拜访该服务器内网 IP

视频文件只需一个视频地址就行，也有以下几种抉择：

• 具备公网 IP 的服务器
• localhost(本地服务器)，同一个局域网内的设施拜访该服务器内网 IP
• 第三方视频地址

应用场景 1：

云服务器带宽足够大(至多要大于播放视频的码率)，云服务器既能够作为 websocket 服务端，也能够作为 http 服务端。上图中所有设施都拜访云服务器的 ip 或域名。

应用场景 2：

云服务器的带宽很小，这时候它只能作为 websocket 服务端，这时能够用上图中的 PC1 和 PC2 作为 http 服务端，PC1 和 PHONE1 在一个内网拜访 PC1 的内网 IP，PC2 和 PHONE2 在一个内网拜访 PC2 的内网 IP，PC3 可作为本人的 http 服务端，PHONE3 若是有提供视频文件的服务端，也能够应用。

应用场景 3：

须要应用 zerotier 或其余 VPN 工具将异地设施组成一个大局域网，其中任意一台 PC 均可作为 websocket 服务端和 http 服务端(须要上传带宽足够大)。上图中各设施都拜访那台 PC 的内网 ip 即可。

最简略的应用办法，下载 nginx 开启一个本地服务器，下载本我的项目 client 文件夹放到到 nginx 根目录里，视频文件也放到外面。注册 goeasy 开发者账号并创立一个利用，取得 appkey，并填入到 appkey 到代码 (script/main.js) 相应地位。而后浏览器关上 192.168.3.58/client/，填入你的视频地址 192.168.3.58/movie/xxx.mp4 或网络视频地址，对方也这样操作一番，即可实现同步播放视频。

web 版本的性能比较简单，而且受限于网络问题，快进之类的操作须要缓冲一段时间。如果你不满足 web 版性能，对用户体验有更高的要求，如反对更多文件格式、播放高清本地视频文件、外挂字幕等，我也找到了另一种形式来满足你的需要。

那就是 DIY 一个开源的播放器的源码：SPlayer(射手影音)。

射手影音官网：https://splayer.org

源码地址：https://github.com/chiflix/sp…

在以 electron + 播放器为关键字一番搜寻之后，我找到了这个基于 electron 实现的开源播放器，并下载了源码来钻研。

通过一番钻研之后，我找到了管制视频播放、暂停、快进的代码地位，并将管制同步的代码移植了进去，从而也实现了同步性能，并且与 web 版兼容。

具体方法请看：批改教程

本我的项目局部图标款式来源于此我的项目: coplay

本我的项目 github 地址：点击返回，欢送⭐⭐⭐STAR⭐⭐⭐

对于 GoEasy：

GoEasy 是一个成熟稳固的企业级 websocket PAAS 服务平台，开发人员不须要思考 websocket 服务端的搭建，只须要几行代码，就能够轻松实现客户端与客户端之间，服务器与客户端之间的的 websocket 通信。

GoEasy 作为国内当先的第三方 websocket 音讯推送平台，具备极佳的兼容性。除了兼容所有常见的浏览器以外，同时也兼容 uni-app，各种小程序，以及 vue、react-native、cocos、laya、egret 等常见的前端框架。

同时 GoEasy 曾经内置 websocket 中必备的心跳，断网重连，音讯补发，历史音讯和客户端高低线揭示等个性，开发人员也不须要本人搭建 websocket 服务解决集群高可用，平安和性能问题。GoEasy 曾经稳固运行了 5 年，反对千万级并发，胜利撑持过很多知名企业的重要流动，安全性和可靠性都是久经考验。

有趣味本人搭建 websocket 的话，能够参考这篇技术分享《搭建 websocket 音讯推送服务，必须要思考的几个问题》