如何利用websocket实现双屏互动体验

双屏互动原理描述：

现在多数双屏互动的实现方式主要是依靠浏览器的WebSocket即时通信技术，包括国外许多案例，在以前传统的网站为了实现这种技术基本都是轮询，在一个特定的时间内，由客户端向服务端发出请求，之后服务器返回到浏览器，这种传统的实现方法需要客户端不停的向服务端请求数据，而且其传输的数据可能是一个很小的值。

在 WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就可以直接实时的互相传送数据。

采用websocket技术的页面不同于普通页面，而是需要特殊的服务器环境支持。

服务器环境的搭建：

目前支持WebSocket环境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs等，还有html5 的websocket方案，但是目前在我国浏览器使用情况上，IE用户还占有50%左右的市场份额，html5 的websocket只能支持IE10+和其他高端浏览器，在兼容性方面socket.io做的很好，所以对于前端工程师，我们优先选Nodejs和socket.io来搭建WebSocket服务器端。

前期我们可以在自己电脑搭建与服务器一致的环境来测试，本地搭建的方法:

1. 下载官方Node.js，安装可以一直下一步，我个人习惯都会自定义安装软件

2. 安装Nodejs 的模块管理器npm（官网最新版Nodejs已集成，无需单独安装）

3. 命令窗口模式安装 socket.io（npm install socket.io）

（这里如果遇到安装不成功情况，注意考虑设置一下代理，设置方法：npm config set proxy=地址:端口号，运气实在不好的话从其他电脑复制同版本文件夹也一样）

4. 最后查看安装的模块及版本：npm list

1、打开任意一个网站，根据自己的需要选择。

2、如图点击右上角三条横杠的按钮。

3、点击”工具“选项。

4、点击”查看源代码“。

5、如图，就可以轻松查看到了该网站的源代码。

6、如果想关闭网页源代码，只需点击左上角“返回”按钮，这样就完成了。

连续播放两个视频是什么意思？

如果是同时播放两个，写两个 <video></video>标签就行了，一个标签放一个视频；

如果是播放完一个视频后接着再播放下一个视频这样连续播放，用脚本监听 <video>标签的视频播放结束 事件，再接着播放下一个视频就行；

<video  id="video"  src="test1.mp4"></video> <script>

var video = document.getElementById('video')

video.addEventListener('ended',function(){

    //  第一个视频播放结束

    //  如果要继续播放第二个视频，改变 <video> 标签的 (src="test2.mp4") 属性或者新建一个 video 标签播放视频都可以

},false)

</script>

---