java web 弹幕技术实现

最新推荐文章于 2024-09-16 00:04:51 发布

Yuan-w

最新推荐文章于 2024-09-16 00:04:51 发布

阅读量1.6w

点赞数 10

本文链接：https://blog.csdn.net/jekxi/article/details/49968213

版权

本文介绍了如何使用Java Web和WebSocket技术实现弹幕功能。前端通过JavaScript与WebSocket连接，当接收到任何客户端发送的信息时，服务端将信息广播到所有连接的客户端。示例代码包括HTML、CSS和JavaScript的前端部分，以及Java的WebSocket服务端实现。

摘要由CSDN通过智能技术生成

先放入效果图

实现环节

1-前端实现将把信息发送到后台和接收后台发送过来的信息并且将其发射弹幕到浏览器上

2-通过websocket与每个服务端连接，当接收到来自任何一个前端发来的信息，就将该信息群发至所有的客户端(也就是浏览器)

客户端(浏览器)的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Keywords" content="danmu">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>弹幕网站</title>
<style type="text/css">
body {
background: url(images/01.jpg); no-repeat top center;
font-size: 12px;
font-family: "微软雅黑";
}

* {
margin: 0;
padding: 0;
}
/* screen start*/
.screen {
width: 300px;
height: 100px;
background: #669900;
}

.dm {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}

.dm .d_screen .d_del {
width: 38px;
height: 38px;
background: #600;
display: block;
text-align: center;
line-height: 38px;
text-decoration: none;
font-size: 20px;
color: #fff;
border-radius: 19px;
border: 1px solid #fff;
z-index: 2;
position: absolute;
right: 20px;
top: 20px;
outline: none;
}

.dm .d_screen .d_del:hover {
background: #F00;
}

.dm .d_screen .d_mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index: 1;
}

.dm .d_screen .d_show {
position: relative;
z-index: 2;
}

.dm .d_screen .d_show div {<

最低0.47元/天解锁文章