使用WebSocket搭建视频服务器+HTML（优化版）

chajiong · 发表于 2020-2-24 20:41:16

本帖最后由 chajiong 于 2020-2-25 17:42 编辑

使用WebSocket搭建视频服务器+HTML（优化版）

优化了搜索功能（目前仅对接IQIYI的电影zy）

需要更多zy的可以修改内置网址和正则格式

推荐使用：360kan搜索全网zy（内置接口支持TX/优酷/爱奇yi/芒果）

HTML前端网页支持PC端和移动端搜索

压缩包内置服务器和HTML源文件

备注：自己搭建的话记得修改一下index.html里面的IP地址哟

WebSocket视频服务器优化版.rar (1.49 MB, 下载次数: 408)

2020-2-24 20:40 上传

点击文件名下载附件

新增HTML和PHP搜索，解决断线BUG

右键复制保存，一个index.html 一个welcome.php

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<link rel="stylesheet" href="css/iconfont/iconfont.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/layout.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/fontSize.js"></script>
<script src="js/rippleEffect.js"></script>
<script src="js/wcPop/wcPop.js"></script>
</head>
<body>
<div class="weChatIM__panel clearfix">
<div class="we__chatIM-wrapper flexbox flex__direction-column">
<div class="wcim__container flex1">
<div id="mescroll" class="mescroll"><div class="tabBar__tmpl tabBar01"><div class="wcim__searbox"><form action="welcome.php" method="GET"><div class="inner flexbox flex-alignc"><i class="iconfont icon-search"></i><input class="ipt-sear flex1" type="text" name="fname" placeholder="输
入影片名称或明星" /> <input type="submit" class="ipt-sear" value="搜索"></div>
</form>
</div>
<div class="wcim__recordList" id="J__recordList">
<ul class="clearfix">
<li class="wcim__material-cell"><a class="flexbox flex-alignc" href="#"><div class="avator"><img src="img/t4.jpg" /></div><div class="info flex1"><h2 class="title">WebSocket</h2> <p class="desc clamp1">中国加油，武汉加油！！！</p>
</div><label class="time flex-selft">公告</label>
</a>
</li>
<li class="wcim__material-cell"><a class="flexbox flex-alignc" ><div class="avator"><img src="img/f4.png" /></div><div class="info flex1"><h2 class="title">法证先锋IV 第一集</h2> <p class="desc clamp1">主演:黄浩然李施嬅谢贤米雪</p>
</div><label class="time flex-selft">电视剧</label>
</a>
</li>
<li class="wcim__material-cell"><a class="flexbox flex-alignc" ><div class="avator"><img src="img/f4.png" /></div><div class="info flex1"><h2 class="title">法证先锋IV 第二集</h2> <p class="desc clamp1">主演:黄浩然李施嬅谢贤米雪</p>
</div><label class="time flex-selft">电视剧</label>
</a>
</li>
<li class="wcim__material-cell"><a class="flexbox flex-alignc" ><div class="avator"><img src="img/f4.png" /></div><div class="info flex1"><h2 class="title">法证先锋IV 第三集</h2> <p class="desc clamp1">主演:黄浩然李施嬅谢贤米雪</p>
</div><label class="time flex-selft">电视剧</label>
</a>
</li>
<li class="wcim__material-cell"><a class="flexbox flex-alignc" ><div class="avator"><img src="img/f4.png" /></div><div class="info flex1"><h2 class="title">法证先锋IV 第四集</h2> <p class="desc clamp1">主演:黄浩然李施嬅谢贤米雪</p>
</div><label class="time flex-selft">电视剧</label>
</a>
</li>
<li class="wcim__material-cell"><a class="flexbox flex-alignc" ><div class="avator"><img src="img/f4.png" /></div><div class="info flex1"><h2 class="title">法证先锋IV 第五集</h2> <p class="desc clamp1">主演:黄浩然李施嬅谢贤米雪</p>
</div><label class="time flex-selft">电视剧</label>
</a>
</li>
<li class="wcim__material-cell"><a class="flexbox flex-alignc" ><div class="avator"><img src="img/f4.png" /></div><div class="info flex1"><h2 class="title">法证先锋IV 第六集</h2> <p class="desc clamp1">主演:黄浩然李施嬅谢贤米雪</p>
</div><label class="time flex-selft">电视剧</label>
</a>
</li>
</ul>
</div>
<div class="cls rmb-50"></div>
</div>
</div>
</div>
</body>
</html>

复制代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>搜索</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<link rel="stylesheet" href="css/iconfont/iconfont.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/layout.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/fontSize.js"></script>
<script src="js/rippleEffect.js"></script>
<script src="js/wcPop/wcPop.js"></script>
</head>
<script type="text/javascript">
//用于填写发送消息的输入框
var messageBox;
//用于显示消息的div容器
var messageLog;
//WebSocket对象
var socket;
//页面加载完毕
window.onload = function() {
messageBox = document.getElementById('messageBox');
messageLog = document.getElementById('messageLog');
connect();
}
//创建socket对象并绑定所有事件
function connect() {
//创建socket对象
socket = new WebSocket("ws://134.175.132.220:8088");
//监听所有的Web socket事件
socket.onopen = connectionOpen;
socket.onmessage = messageReceived;
socket.onerror = errorOccurred;
socket.onclose = connectionClosed;
}
//断开连接按钮点击
function disconnect(){
socket.close();
}
//发送消息按钮点击
function sendMessage(){
//获取要发送的数据
var message = messageBox.value;
//通过socket发送消息
socket.send(message);
//告诉用户刚刚发生了什么
messageLog.innerHTML += "<br>搜索：" + message;
}
//连接建立完毕事件响应
function connectionOpen(e) {
var message = messageBox.value;
//通过socket发送消息
socket.send(message);
//告诉用户刚刚发生了什么
messageLog2.innerHTML += "<br>搜索：" + message;
}
//消息接收事件响应
function messageReceived(e){
messageLog.innerHTML += e.data + "<br>";
}
//错误事件响应
function errorOccurred(e){
messageLog2.innerHTML += "<br>发生错误：" + e.data;
}
//连接关闭事件响应
function connectionClosed(e) {
messageLog2.innerHTML += "<br><br><span class='label label-default'>WebSocket 连接关闭</span>";
}
</script>
<body>
<div class="wcim__recordList" id="J__recordList">
<ul class="clearfix" id="messageLog" >
</ul>
</div>
<div class="cls rmb-50"></div>
</div>
</div>
</div>
<?php echo '<input id="messageBox" type="hidden" value="'.$_GET["fname"].'" />'; ?>
</body>
</html>

复制代码

补充内容 (2020-2-27 17:25):
最新版发布 https://bbs.125.la/thread-14536763-1-1.html 优化多个功能和界面

liangshenda · 发表于 2023-7-4 14:52:15

学习了，谢谢！！！！！！

liangshenda · 发表于 2023-7-4 14:51:46

学习了，谢谢！！！！！！

liangshenda · 发表于 2023-7-4 14:51:26

学习了，谢谢！！！！！

kirisame · 发表于 2023-5-28 20:12:04

tfsssssssssssssssss

帝祁 · 发表于 2023-5-28 17:37:03

大佬就是牛逼啊

帝祁 · 发表于 2023-5-28 17:36:32

支持下，顺便回复

Supertao · 发表于 2022-9-17 23:53:53

支持下，顺便回复

a150590 · 发表于 2022-6-26 20:43:59

大佬就是牛逼啊

playflash · 发表于 2022-5-23 20:26:06

晕，不够币了

小伟家园 · 发表于 2022-5-18 21:44:45

进来看看进来看看

		自动登录	找回密码
密码			注册

[易语言纯源码] 使用WebSocket搭建视频服务器+HTML（优化版）

点评

评分

本帖被以下淘专辑推荐: