【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图
需要描述
1）实现黑客帝国文字流效果图，JS功能
2）部署在云中，让大家都可以访问，App Service实现
3）大家都能发送消息，并显示在文字流中，PubSub（websocket）实现
终极效果显示：
执行步骤
1）在 Azure 中创建 App Service 服务，参考官方文档：快速入门：部署 ASP.NET Web 应用
Azure门户中创建App Service的动画演示：
2）在 Azure 中创建 PubSub 服务，参考官方文档：快速入门：从 Azure 门户创建 Web PubSub 实例
Azure门户中创建Web PubSub的动画演示：
3）使用Visual Studio 2022创建一个.NET 6.0 Web项目，参考PubSub的文档来创建一个服务端来托管 /negotiate API和Web 页面，参考示例：教程：使用子协议在 WebSocket 客户端之间发布和订阅消息
Program.cs文件内容为：
string ConnectionString = "<Web PubSub Access Key>" 获取的办法见第二步创建的PubSub服务的Key页面 --> Connection String
using Azure.Messaging.WebPubSub;
using Microsoft.Extensions.Azure; string ConnectionString = "<Web PubSub Access Key>"; // Add WebPubSub Service
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAzureClients(builder =>
{
builder.AddWebPubSubServiceClient(ConnectionString, "stream");
}); var app = builder.Build(); app.UseStaticFiles(); app.UseRouting(); //实现生产客户端WebSocket SAS URL
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/negotiate/{userid}", async (string userid, HttpContext context) =>
{
var service = context.RequestServices.GetRequiredService<WebPubSubServiceClient>();
var response = new
{
url = service.GetClientAccessUri(userId: userid, roles: new string[] { "webpubsub.sendToGroup.stream", "webpubsub.joinLeaveGroup.stream" }).AbsoluteUri
};
await context.Response.WriteAsJsonAsync(response);
});
}); app.MapGet("/", () => "/index.html"); app.Run();
前端 wwwroot/stream.html 内容为：
<html>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: rgb(0, 0, 0);
} #divList {
width: 98%;
height: 79%;
border: solid 1px rgb(0, 15, 0);
;
margin: 0px auto;
overflow: hidden;
position: relative;
} .divText {
position: absolute;
} .divText span {
display: block;
font-weight: bold;
font-family: Courier New;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <br>
<h2 style="text-align:center; color:white;">STREAM BOARDCAST (<span id="spanCount">0</span>)</h2>
<div id="divList">
</div>
<h3 style="text-align:left; color:grey;">Send</h3>
<div style=" margin: 5px 15px;">
<input id="inputmessage" style="text-align:left; color:green; width: 86%; height: 55px; font-size: 40px;" onsubmit="sendmessage()"><button
style="text-align:center; color:green; width: 12%; height: 55px;font-size: 40px;" onclick="sendmessage()">Send</button>
</div>
<div style="display:none;">
<h1>Message</h1>
<div id="output"></div>
<br>
<h1>Message</h1>
<div id="outputmsg"></div>
</div>
<script>
var textarray = ["Hello Mooncake,Welcome to use PubSub", "Who are you? Put your PIN ... "];
var wsurl = "";
var wsclient;
let ackId = 0;
(async function () {
let res = await fetch('/negotiate/client_2')
let data = await res.json();
wsurl = data.url;
let ws = new WebSocket(data.url, 'json.webpubsub.azure.v1');
ws.onopen = () => {
console.log('connected');
}; let output = document.querySelector('#output');
let outputmsg = document.querySelector('#outputmsg'); ws.onmessage = event => {
let d = document.createElement('p');
d.innerText = event.data;
output.appendChild(d); let message = JSON.parse(event.data);
if (message.type === 'message' && message.group === 'stream') {
let d = document.createElement('span');
d.innerText = message.data;
textarray.push(message.data);
outputmsg.appendChild(d);
window.scrollTo(0, document.body.scrollHeight);
}
}; ws.onopen = () => {
console.log('connected');
ws.send(JSON.stringify({
type: 'joinGroup',
group: 'stream',
ackId: ++ackId
})); wsclient = ws;
};
})(); function sendmessage() { if (wsclient.readyStatue == WebSocket.OPEN) {
wsclient.send(JSON.stringify(
{
type: "sendToGroup",
group: "stream",
data: $('#inputmessage').val(),
ackId: ++ackId // ackId is optional, use ackId to make sure this action is executed
}
));
}
else {
wsclient = new WebSocket(wsurl, 'json.webpubsub.azure.v1'); wsclient.onopen = () => {
console.log('connected again');
wsclient.send(JSON.stringify({
type: "sendToGroup",
group: "stream",
data: $('#inputmessage').val(),
ackId: ++ackId
})); };
}
$('#inputmessage').focus();
} function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
} function add(message) {
var maxwdth = $('#divList').width();
var x = rand(0, maxwdth);
var html = '<div class="divText" style="left:' + x + 'px; bottom:500px;">'; var color = [];
for (var i = 1; i < message.length; i++) {
var f = i.toString(16);
color.push('0' + f + '0');
} var fontSize = rand(20, 36);
for (var i = 1; i <= message.length; i++) {
var c = message[i - 1];
html += '<span class="s' + i + '" style="color:#' + color[i - 1] + '; font-size:' + fontSize + 'px; text-shadow:0px 0px 10px #' + color[i - 1] + ';">' + c + '</span>';
}
html += '</div>';
$('#divList').append(html);
} function run() {
var x = rand(0, 100);
if (x < 100) {
var lgh = textarray.length;
if (textarray.length > x) add(textarray[x]);
else
add(textarray[x % lgh]);
}
$('#spanCount').html($('.divText').size()); $('.divText').each(function () {
var y = $(this).css('bottom');
y = parseInt(y);
y -= $(this).find('span').eq(0).height();
$(this).css('bottom', '' + y + 'px');
if (y + $(this).height() <= 0) {
$(this).remove();
return;
}
}); window.setTimeout(run, 200);
}
run(); </script>
</body> </html>
项目结构示意图：
项目创建完成后，可以在本机进行调试。正常运行后即可发布到Azure App Service上。因代码简单并且可读性强，可自行理解。
4）通过VS 2022发布到App Service中
VS 2022 通过Publish Profile 发布站点演示动画：
发布版本操作完成。
附录一：本地黑客帝国文字流效果，可自行输入即修改内容版
复制内容，直接保存在本地文件中，文件命名为 localstream.html后使用浏览器打开即可
<html>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: rgb(0, 0, 0);
} #divList {
width: 98%;
height: 79%;
border: solid 1px rgb(0, 15, 0);
;
margin: 0px auto;
overflow: hidden;
position: relative;
} .divText {
position: absolute;
} .divText span {
display: block;
font-weight: bold;
font-family: Courier New;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <br>
<h2 style="text-align:center; color:white;">STREAM BOARDCAST (<span id="spanCount">0</span>)</h2>
<div id="divList">
</div>
<h3 style="text-align:left; color:grey;">Send</h3>
<div style=" margin: 5px 15px;">
<input id="inputmessage" style="text-align:left; color:green; width: 86%; height: 55px; font-size: 40px;" onsubmit="sendmessage()"><button
style="text-align:center; color:green; width: 12%; height: 55px;font-size: 40px;" onclick="sendmessage()">Send</button>
</div>
<div style="display:none;">
<h1>Message</h1>
<div id="output"></div>
<br>
<h1>Message</h1>
<div id="outputmsg"></div>
</div>
<script>
var textarray = ["Hello Mooncake,Welcome to use PubSub", "Who are you? Put your PIN ... "]; function sendmessage() {
textarray.push($('#inputmessage').val());
$('#inputmessage').focus();
} function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
} function add(message) {
var maxwdth = $('#divList').width();
var x = rand(0, maxwdth);
var html = '<div class="divText" style="left:' + x + 'px; bottom:500px;">'; var color = [];
for (var i = 1; i < message.length; i++) {
var f = i.toString(16);
color.push('0' + f + '0');
} var fontSize = rand(20, 36);
for (var i = 1; i <= message.length; i++) {
var c = message[i - 1];
html += '<span class="s' + i + '" style="color:#' + color[i - 1] + '; font-size:' + fontSize + 'px; text-shadow:0px 0px 10px #' + color[i - 1] + ';">' + c + '</span>';
}
html += '</div>';
$('#divList').append(html);
} function run() {
var x = rand(0, 100);
if (x < 100) {
var lgh = textarray.length;
if (textarray.length > x) add(textarray[x]);
else
add(textarray[x % lgh]);
}
$('#spanCount').html($('.divText').size()); $('.divText').each(function () {
var y = $(this).css('bottom');
y = parseInt(y);
y -= $(this).find('span').eq(0).height();
$(this).css('bottom', '' + y + 'px');
if (y + $(this).height() <= 0) {
$(this).remove();
return;
}
}); window.setTimeout(run, 200);
}
run(); </script>
</body> </html>
PS: 与PubSub版本相比，只是移除了WebSocket的相关代码
运行效果
参考资料
JS 黑客帝国文字下落效果： https://www.cnblogs.com/zjfree/p/3833592.html
教程：使用子协议在 WebSocket 客户端之间发布和订阅消息：https://docs.microsoft.com/zh-cn/azure/azure-web-pubsub/tutorial-subprotocol?tabs=csharp#using-a-subprotocol
快速入门：部署 ASP.NET Web 应用：https://docs.azure.cn/zh-cn/app-service/quickstart-dotnetcore?tabs=net60&pivots=development-environment-vs
【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图的更多相关文章
- 【Azure DevOps系列】使ASP.NET Core应用程序托管到Azure Web App Service
使用Azure DevOps Project设置ASP.NET项目 我们需要先在Azure面板中创建一个Azure WebApp服务,此处步骤我将省略,然后点击部署中心如下图所示: 此处我选择的是Az ...
- 【Azure 应用服务】App Service中，为Java应用配置自定义错误页面，禁用DELETE, PUT方法
问题定义 使用Azure应用服务(App Service),部署Java应用,使用Tomcat容器,如何自定义错误页面呢?同时禁用DELETE, PUT方法 解决办法 如何自定义错误页面呢?需要在 J ...
- 【应用服务 App Service】快速获取DUMP文件(App Service for Windows(.NET/.NET Core))
问题情形 当应用在Azure 应用服务App Service中运行时,有时候出现CPU,Memory很高,但是没有明显的5XX错误和异常日志,有时就是有异常但是也不能明确的指出具体的代码错误.当面临这 ...
- 【Azure 应用服务】App Service 通过配置web.config来添加请求返回的响应头(Response Header)
问题描述 在Azure App Service上部署了站点,想要在网站的响应头中加一个字段(Cache-Control),并设置为固定值(Cache-Control:no-store) 效果类似于本地 ...
- 【Azure 应用服务】NodeJS Express + MSAL 应用实现AAD集成登录并部署在App Service Linux环境中的实现步骤
问题描述 实现部署NodeJS Express应用在App Service Linux环境中,并且使用Microsoft Authentication Library(MSAL)来实现登录Azure ...
- 改善Azure App Service托管应用程序性能的几个技巧
本文介绍了几个技巧,这些技巧可以改善Azure App Service托管应用程序的性能.其中一些技巧是你现在就可以进行的配置变更, 而其他技巧则可能需要对应用程序进行一些重新设计和重构. 开发者都希 ...
- 【应用服务 App Service】解决无法从Azure门户SSH登录问题
问题描述 中国区的Azure App Service(应用服务)已经支持创建Docker并选择Linux环境.在使用中,我们可以继续通过kudu站点的方式登录查看站点的一些日志及部署文件.它的登录方式 ...
- 【Azure 应用服务】App Service与APIM同时集成到同一个虚拟网络后，如何通过内网访问内部VNET的APIM呢？
问题描述 App Service访问的APIM已配置内部虚拟网络(Internal VNet)并拥有内网IP地址.App Service与APIM都在相同的虚拟网络(VNET)中.App Servic ...
- 【Azure 应用服务】App Service 在使用GIt本地部署，上传代码的路径为/home/site/repository，而不是站点的根目录/home/site/wwwroot。 这个是因为什么？
问题描述 App Service 在使用GIt本地部署,上传代码的路径为/home/site/repository,而不是站点的根目录/home/site/wwwroot. 这个是因为什么? 并且通过 ...
随机推荐
- 小程序web开发框架－weweb介绍
weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web单面应用.如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中.在小程序大行其道的今天,它可以让你的小程序代码得到最大 ...
- 快如闪电，触控优先。新一代的纯前端控件集 WijmoJS发布新版本了
全球最大的控件提供商葡萄城宣布,新一代纯前端控件 WijmoJS 发布2018 v1 版本,进一步增强产品功能,并支持在 Npm 上的安装和发布,极大的提升了产品的易用性. WijmoJS 是用 Ty ...
- 前端面试题整理——VUE相关题目与回答
1.v-if与v-show的区别? v-if的原理是根据判断条件来动态的进行增删DOM元素, v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能所以 ...
- 假期任务一：安装好JAVA开发环境并且在Eclipse上面成功运行HelloWorld程序
(本周主要做了java环境的安装,安装完jdk后又安装了eclipse,平均每天两小时Java吧,这周敲代码的时间比较少,大多是在b站看java入门视频和菜鸟教程的基础语法,也就打开eclipse验证 ...
- 【weex开发】vue-swipe 滑动组件的使用
一,vue-swipe简介 vue-swipe 是饿了么团队开发的vue专用的轮播图插件: 可以实现简单的图片和view轮播,可控制动画时长,可限制手动滑动: 简而言之,可以实现轮播,也可以实现ppt ...
- PAT B1071 小赌怡情
题目描述: 常言道"小赌怡情".这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算机给出第二个数.若玩 ...
- JWT介绍及使用
目录 JWT-JSON WEB TOKEN JWT组成 header payload signature JWT校验 JWT获取信息 JJWT(java jwt api)使用 导入依赖 测试代码 JW ...
- 学习day44
初步学完html的知识
- this的指向问题及改变this指向
概念: this是运行环境下的一个系统变量, 由于this在不同的执行环境下有不同的值, 所以在使用this时,多加注意 (使用this之前,先打印) 1,在全局作用域下,this默认指向window ...
- android软件简约记账app开发day02-收入支出明细页面绘制
android软件简约记账app开发day02-收入支出明细页面绘制 效果图 列表界面绘制 新建layout文件-item_mainlv.xml大体使用绝对布局,嵌套相对布局,嵌套文本内容实现 < ...