弹幕视频设计网站17-----------websocket完结撒花

简介: 弹幕视频设计网站17-----------websocket完结撒花

大家好,我是爱你三千遍斯塔克,之前我们讨论了弹幕暂停与调节进度条,进度条一拖拽,便不再出现的情况,但是优化之后的弹幕仍然存在一个问题,就是使用不同浏览器,打开之后,发现,这个浏览器发送了,这次我们主要讨论使用不同浏览器打开能够同时共享弹幕数据,,这里有一些资料,可供大家参考,希望对大家有帮助。学习交流群:293911833,有遇到问题的,可以加一下群,大家互相交流,一起进步

       希望你喜欢我的内容,记得关注我哦!我会继续为大家带来更好的作品!”

1、现在我们添加websocket

2、我们模拟Websocket到底有什么用,这里我们模拟多用户去使用,一个用户,使用chrome浏览器,一个用户利用火狐浏览器


3、我们在火狐浏览器上发送一个弹幕

4、我们在火狐浏览器是2.3秒钟出现的

5、在我们chrome中并没有websocket出现

6、点击刷新一下Websocket才能够刷新成功,websocket的意义是,不用刷新,就能够实时将弹幕刷新显示在左边

7、第一步先安装依赖

8、这里我们新建目录

9、这里我们添加一个server服务

10、新建一个文件

11、创建index.js这个文件

12、固定的步骤,首先先写一个端口号

13、为什么,他需要一个端口号呢?这里用了两个客户端,这里我们新建一个服务端,客户端把弹幕数据传给websocket的数据,然后再传给客户端

14、访问8082端口进行分发

15、使用这个的时候,我们就要调用这个函数

16、我们使用WebSocket的连接,这个方法我们自己写,当我们调用handleController,调用函数

17、这个意思是当我们发现Websocket的时候,当我们收到客户端信息之后,遍历客户端,发送给他们

18、我们new 一个端口

19、这里我们加一个监听器

20、我们希望在服务端,这里去调用弹幕函数

21、

22、这里出了问题,要调用init函数

23、这里就可以调用git弹幕了

24、这里我们可以看到不同浏览器中能够看到将弹幕同时呈现在页面上了



相关文章
|
2月前
AutoJS4.1.0实战教程 ---彩蛋视频自动答复
AutoJS4.1.0实战教程 ---彩蛋视频自动答复
37 0
|
2月前
AutoJS4.1.0实战教程----刷爆短视频
AutoJS4.1.0实战教程----刷爆短视频
52 0
|
11月前
|
Python Windows
一键生成朋友圈公众号转发截图,自定义朋友圈点赞评论
Python实现朋友圈转发截图制作,生成自定义点赞评论
|
11月前
|
搜索推荐 Python Windows
|
11月前
|
安全 网络协议 物联网
不看后悔系列之一篇搞懂LinuxCentOS搭建MQTT服务器及客户端操作使用
linux CentOS上搭建MQTT服务器并不难,主要就是用到了mosquitto这款消息代理服务软件。其采用发布/订阅模式传输机制,轻量、简单、开放并易于实现,被广泛应用于物联网之中。
1595 0
|
11月前
|
小程序
云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)
云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)
91 0
弹幕视频设计网站14--------修改bug
弹幕视频设计网站14--------修改bug
|
2月前
|
资源调度 JavaScript 前端开发
❤Nodejs 第十五章(简单websocket聊天实现)
【4月更文挑战第15天】本文介绍了在Node.js中实现简单WebSocket聊天的过程。首先通过`yarn`创建项目并安装`ws`和`express`依赖。接着,编写`WebSocketServer.js`建立WebSocket服务器,处理客户端连接、消息收发及错误。然后,用`server.js`创建一个静态文件服务器,提供`index.html`。`index.html`包含客户端的WebSocket连接和消息处理。启动两个服务器后,可以在浏览器中打开`index.html`进行聊天。最后,讨论了在Node.js 20+Vite环境下使用WebSocket时可能遇到的问题
32 0
|
2月前
|
安全 Android开发 iOS开发
《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(8)-Fiddler如何设置捕获会话
【2月更文挑战第9天】《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(8)-Fiddler如何设置捕获会话
58 5
|
2月前
Autojs4.1.0实战教程---快逗短视频自动签到
Autojs4.1.0实战教程---快逗短视频自动签到
32 0