HTML+JS+websocket 实现联机“游戏王”对战（六）- 卡片放置，战场更新

最新推荐文章于 2021-05-24 14:27:42 发布
最新推荐文章于 2021-05-24 14:27:42 发布
阅读量600 收藏
点赞数
分类专栏： 前端 游戏 文章标签： 游戏 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KalsasCaesar/article/details/116173803
版权

目录：

游戏王联机卡牌对战 1 - 前言
游戏王联机卡牌对战 2 - 联机模式
游戏王联机卡牌对战 3 - 界面布局
游戏王联机卡牌对战 4 - 卡组系统
游戏王联机卡牌对战 5 - 卡片选中系统
游戏王联机卡牌对战 6 - 卡片放置，战场更新
游戏王联机卡牌对战 7 - 墓地，副控制面板
游戏王联机卡牌对战 8 - 返回手卡，牌组
游戏王联机卡牌对战 9 - 实现简单websocket通信
游戏王联机卡牌对战10 - 搭建游戏服务端
游戏王联机卡牌对战11 - 客户端消息的收发
游戏王联机卡牌对战12 - 消息发送具体场景
游戏王联机卡牌对战13 - 实机演示

功能按键的实现（一）

1. 卡片放置：

卡片的攻击，防御，背盖防御召唤以及发动，覆盖，这些操作都可归类为玩家向战场上放置卡片，卡片放置函数可通过传递不同参数来分别执行这些功能。

实现卡片放置主要有几个步骤：

（1）选中手牌某一张卡片，并记录卡片信息：
这个操作由我们前面章节介绍的卡片选中系统来完成，当我们选中某张卡片后会用一个全局对象记录卡片的来源类型（手牌/场上），卡片序号，卡牌图片 url 等信息供其他函数使用。

（2）寻找场上的空卡槽：
确定怪兽/魔法陷阱区域的某个空卡槽，如果没有空卡槽剩余则无法执行召唤/发动/覆盖。

（3）将被选中的手牌删除：
被选中的手牌被打到场上去了，故需从手牌被删除。

（4）更新战场信息并更新战场：
将被选中的卡片按要求加载至战场上并记录其状态。


卡片放置函数 placeCard:

参数含义
placetype放置类型，包括 攻击 / 防御 / 背盖防御 / 发动 / 覆盖
cardtype卡片类型，包括 怪兽 / 魔法陷阱
寻找 怪兽/魔法陷阱 区域的空卡槽；

如果（卡槽未满）；
	如果（被选中的卡片来源于手牌）：
		记录手牌id；
		通过手牌id获取手牌卡槽对象；
		清除手牌卡槽的卡片；
		
		更新战场数组fieldArrayPly1的内容；
		更新战场上的卡片；

		清空所有卡槽的选中状态；


/**
 * 我方从手牌向场上放置卡片，并发出放置指令 (攻击，防御，背盖防御，发动，盖卡)
 * @param {string} placetype - place type (attack/defence/back/on/off)
 * @param {string} cardtype - card type (monster/magic)
 */
function placeCard(placetype, cardtype) {

    var cardslot = findEmptySlot(cardtype) //寻找空的卡槽
    var cardsrc;

    if(cardslot == -1) {
        alert("卡槽已满");
    } else {
        if (SelectedCard.type == 'hand') {  //放置卡片必须来源于手牌
            /*获取被选中手卡信息 */
            var handslot = (SelectedCard.cardNo).toString();
            var handID = "p1-hand" + handslot;
            element = document.getElementById(handID);
            cardsrc = SelectedCard.cardSrc;
            element.src = "";  //手牌该卡消失

            /*更新战场信息 */
            fieldArrayPly1.FieldCards[cardslot].imgsrc = cardsrc;
            fieldArrayPly1.FieldCards[cardslot].state = placetype;

            /*发出指令，执行更新战场卡片的函数 */
            var fieldID = "p1-field" + cardslot.toString();
            updateField(fieldID, placetype, cardsrc);

            /**
             * 放置后告知对手执行战场更新函数;
             * 放置完成后记得告诉对手哪张手卡消失了;
             * 注意：我方战场变化对对方来说是P2;
             */
            var updateID = "p2-field" + cardslot.toString();
            messageField(placetype, updateID, cardsrc);
            messageHand('reduce', handslot);

            /*清空所有选中状态 */
            cleanSelected();
        }
    }
}

在html中：

<button class="button" type="button" name="attkSummon" onclick="placeCard('attk', 'monster')">攻击召唤</button>
<button class="button" type="button" name="defenSummon" onclick="placeCard('defen', 'monster')">守备召唤</button>
<button class="button" type="button" name="backSummon" onclick="placeCard('back', 'monster')">背盖召唤</button>
<button class="button" type="button" name="launchCard" onclick="placeCard('on', 'magic')">发动(手卡)</button>
<button class="button" type="button" name="coverCard" onclick="placeCard('off', 'magic')">覆盖(手卡)</button>

这些 button 都会调用 placeCard 函数，且根据不同的功能传入不同的参数。


寻找空卡槽函数 findEmptySlot：

/**
 * 返回当前我方场上/手牌的空卡槽序号（怪兽卡槽与魔法陷阱卡槽也要区分开）
 * @param {string} slottype - type of wanted empty slot (monster/magic/hand) 
 */
function findEmptySlot(slottype) {
    var emptySlot = -1;

    if (slottype == 'monster') {  //放置怪兽卡搜索0-4卡槽
        for (var i=0; i<5; i++) {
            if (fieldArrayPly1.FieldCards[i].state == "null") {
                emptySlot = i;
                break;
            }
        }
    } else if (slottype == 'magic') {  //放置魔法陷阱卡搜索5-9卡槽
        for (var i=5; i<10; i++) {
            if (fieldArrayPly1.FieldCards[i].state == "null") {
                emptySlot = i;
                break;
            }
        }
    } else if (slottype == 'hand') {
        for (var i=0; i<8; i++) {
            var handID = 'p1-hand' + i.toString();
            element = document.getElementById(handID);
            if (element.src == emptysrc) {  //如果该卡槽为空
              emptySlot = i;
              break;
            }
        }
    }

    return emptySlot;
}

根据被选中卡片的类型去寻找相应区域的空卡槽，并返回卡槽序号。


2. 更变卡片表示形式：

卡片表示形式的更变包括怪兽卡与魔法陷阱卡。

怪兽卡的形式变更顺序：
攻击 -> 防御 -> 背盖 -> 攻击 -> …

魔法陷阱的形式更变顺序：
覆盖 -> 表侧 -> 覆盖 -> …


更变形式函数 changeState：

参数含义
cardtype卡片类型，包括 怪兽/魔法陷阱
如果（被选中的卡属于场上 且 属于我方玩家player1）：
	获取卡槽id；
	获取卡槽中的卡片url以及当前状态（即表示形式state）；
	
	如果卡片类型是：
	怪兽：
		按 攻击/防御/背盖 的顺序变更1次状态并记录；
	魔法陷阱：
		按 表侧/背盖 的顺序变更1次状态并记录；
	
	更新战场数组fieldArrayPly1中该卡槽的状态（state）；
	更新战场上的卡片；


/**
 * 更变卡片的表示形式
 * 更变顺序为：攻击 -> 防御 -> 背盖 -> 攻击， 盖覆卡 -> 表侧卡 -> 盖覆卡
 * @param {string} cardtype - card type (monster/magic)
 */
function changeState(cardtype) {
    if (SelectedCard.type == 'field' && SelectedCard.player == 'player1') {  //必须是我方场上的卡方可更变表示形式
        var fieldID = "p1-field" + (SelectedCard.cardNo).toString();
        var cardsrc = fieldArrayPly1.FieldCards[SelectedCard.cardNo].imgsrc;
        var cardstate = fieldArrayPly1.FieldCards[SelectedCard.cardNo].state;

        switch (cardtype) {
            case 'monster':
                if (cardstate == 'attk') {
                    cardstate = "defen";
                } else if (cardstate == 'defen') {
                    cardstate = "back";
                } else if (cardstate == 'back') {
                    cardstate = "attk";
                }
                break;
            case 'magic':
                if (cardstate == 'off') {
                    cardstate = "on";
                } else {
                    cardstate = "off";
                }
                break;
            default:
                break;
        }

        fieldArrayPly1.FieldCards[SelectedCard.cardNo].state = cardstate;  //更新场上卡片状态信息
        cardstate = "change-" + cardstate;  //为通过更变形式而导致的战场更新操作添加一个标签方便更新函数识别（因为更变形式不触发音效）
        updateField(fieldID, cardstate, cardsrc);  //更新指定卡槽

        /**
         * 告知对手某一卡槽的表示形式发生变化，执行战场更新函数
         */
        var updateID = "p2-field" + (SelectedCard.cardNo).toString();
        messageField(cardstate, updateID, cardsrc);
    }
}

更变后的形式（state）会被战场数组记录并同时传递给战场更新函数 updateField 以更新所选卡槽的卡片样式。


3. 战场更新函数：

战场更新函数 updateField 用于更改某一个卡槽的卡片样式，让玩家可以实际的看到操作带来的变化，前面介绍的两个函数均有在作用域的末尾调用此函数。

参数含义
fieldID需要更新的卡槽 id
cardstate需要更新的卡片状态
cardsrc需要更新的卡牌图片 url

updateField 的原理很简单，我们在css中准备了几种卡片状态对应的卡槽样式，根据参数的不同修改卡槽样式即可（其实有些样式是一样的完全可以共用…）。

.main-field .battle-field .card-field .item .card-attk {
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-defen {
  width: 65px;
  height: 94px;
  transform: rotate(90deg);
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-back {
  width: 65px;
  height: 94px;
  transform: rotate(90deg);
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-on {  /* 魔法陷阱翻开状态*/
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

.main-field .battle-field .card-field .item .card-off {  /* 魔法陷阱覆盖状态*/
  width: 65px;
  height: 94px;
  margin: 1px 40px;
}

/**
 * 战场状态更新，单独更新某一个卡槽
 * @param {string} fieldID - field img container id 
 * @param {string} cardstate - state of card (attk/defen/back/on/off)
 * @param {string} cardsrc - card source url
 */
function updateField(fieldID, cardstate, cardsrc) { 
    var stateclass;
    element = document.getElementById(fieldID);

    /**
     * 如果是盖卡或背盖召唤直接显示卡片背面
     * 检查showCardInfo函数可知对于我方来说，即使卡片是背面图片仍可以显示卡片信息
     * 由于音效种类问题修改分类了多种情况
     */
    switch (cardstate) {
        case 'off':
        case 'back':
            element.src = CardBackSrc;
            stateclass = "card-" + cardstate;
            /*触发背盖或盖卡音效 */
            var snd = new Audio("sound/activate.wav");
            snd.play();
            break;
        case 'on':  //正常发动卡片
            element.src = cardsrc;
            stateclass = "card-" + cardstate;
            /*触发发动卡片音效 */
            var snd = new Audio("sound/activate.wav");
            snd.play();
            break;
        case 'change-off':  //通过更变形式覆盖卡片
            element.src = CardBackSrc;
            stateclass = "card-" + cardstate.replace("change-", "");
            break;
        case 'change-back':  //通过更变形式背盖召唤卡片
            element.src = CardBackSrc
            stateclass = "card-" + cardstate.replace("change-", "");
            break;
        case 'change-on':  //通过更变形式实现的打开盖卡
            /*触发打开盖卡音效 */
            element.src = cardsrc;
            stateclass = "card-" + cardstate.replace("change-", "");
            var snd = new Audio("sound/open.wav");
            snd.play();
            break;
        case 'null':
            stateclass = "card";
            element.src = cardsrc;
            break;
        default:
            element.src = cardsrc;
            if (cardstate.search("change-") == -1) {  //正常召唤
                stateclass = "card-" + cardstate;
                /*触发发召唤怪兽音效 */
                var snd = new Audio("sound/summon.wav");
                snd.play();
            } else {                                  //更变形式
                stateclass = "card-" + cardstate.replace("change-", "");
            }
            break;
    }

    element.setAttribute("class", stateclass);  //更新对应img容器的class
}

注：这里由于添加音效的问题多出了3种状态，change-off, change-back, change-on，因为通过更变形式打开或背盖卡片与直接从手牌发动或背盖卡片的音效是不同的，故多加了几个状态区分一下。前文 changeState 函数中也有一段代码是为了这里区分而在调用战场更新前修改了状态名称：

fieldArrayPly1.FieldCards[SelectedCard.cardNo].state = cardstate;  //更新场上卡片状态信息
cardstate = "change-" + cardstate;  //为通过更变形式而导致的战场更新操作添加一个标签方便更新函数识别（因为更变形式不触发音效）
updateField(fieldID, cardstate, cardsrc);  //更新指定卡槽

最后来测试一下：

各种召唤：

summons
发动/放置 魔法陷阱：

magics
更变形式：

change_state
下一章继续介绍其他的功能按键。

KalsasCaesar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+JS+websocket 实现联机“游戏王”对战（一）
KalsasCaesar的博客
03-30 2719
HTML+JS+websocket 实战 “游戏王”（Yu-Gi-Oh) 联机卡牌对战（一） 前言 应某友人的要求，同时作为练手项目，花几天时间写了个“游戏王”的联机卡牌对战游戏，游戏内容大致是这样的： 客户端是原生的HTML+JS，服务端基于Node.js（本地服务器），通信协议用的WebSocket。 可以看到游戏界面有很多操作按钮，因为游戏的操作模式是完全仿线下卡牌的游玩模式，也就是不带任何规则判定和卡牌脚本。带规则判定的游戏实现起来复杂度较高，而且光是给每张卡牌的效果编写运行脚本就是一个极其浩
php+html5基于websocket实现聊天室的方法
12-18
本文实例讲述了php+html5基于websocket实现聊天室的方法。分享给大家供大家参考。具体如下： html5的websocket 实现了双向通信，折腾了几天弄了个聊天室，分享给大家 <?php error_reporting(E_ALL); ob_implicit...
用js写卡牌游戏（七）
Xieisabug
10-29 1784
第三个实现的是出牌，听起来比伤害更简单，可是，它比伤害还要复杂。所以这里的出牌，单单只实现打出伙伴，更复杂的逻辑留到之后的文章。 出牌的思路如下：检查费用，费用够的情况才能打出牌，检查场上还能否放置更多的伙伴，满了也不能打出牌，手牌中删除要出的牌，扣除对应费用，场上添加对应的伙伴，出牌的逻辑才完成。 先完成客户端操作，拖拽卡牌并且放在自己的桌面上代表出牌，处理卡牌拖拽，首先要传入是否可拖拽的选项c...
HTML+JS+websocket 实现联机“游戏王”对战（三）- 界面布局
KalsasCaesar的博客
03-31 1111
这章开始要上一些代码了，没什么优化也比较偷懒，见谅。 界面布局 先来看看游戏界面的整体布局，完整HTML代码放在最后了： 这里的HTML代码非常冗余，以后会尝试引入PHP+面向对象的方法简化代码结构。另外游戏界面几乎所有元素的position属性都偷懒统一使用absolute且固定长宽（部分采用百分比，具体可以查看项目的css文件）。这意味着整个游戏界面的大小，每个区域的位置或是每个区域之间的相对位置，都不会随着浏览器的窗口大小的变动而变动。也就是说，如果你在小屏电脑（或缩小的浏览器窗口）上打开该游戏.
HTML+JS+websocket 实现联机“游戏王”对战（四）- 卡组系统
KalsasCaesar的博客
04-14 955
这章开始我们结合 js 代码看看游戏具体功能的实现。大致的规划是先介绍贯穿整个游戏对局的基础功能，之后再针对不同的功能按键和功能板块来逐一介绍。函数中涉及联机的功能会放在实现联机的章节具体介绍。 卡组系统 首先来介绍下整个游戏存放素材的主体，卡组的实现。 1.卡组结构： 游戏的卡组本质上是一个简单的字符串数组，在游戏初始化时就加载存储了每一张卡牌图片的路径（或者URL）。卡组在结构上是一个堆栈，遵循后进先出（LIFO）的原则，即每次送入牌组的卡片默认放在牌组的最上方，若不进行洗牌，那么最后被放入的卡片将在
HTML+JS+websocket 实现联机“游戏王”对战（五）- 卡片选中系统
KalsasCaesar的博客
04-15 1019
I.卡片选中系统 大部分卡片的操作功能都是针对单张卡片的，比如召唤，盖卡，回到卡组，返回手牌，送去墓地。执行这些操作前玩家必须先选定需要操作的对象，即某一张卡片。这个时候我们就需要建立一个卡片选中系统，在玩家选定卡片时记录该卡的相关信息，以便我们对选中的卡片执行相应的操作。 1.全局变量： 首先我们需要一个用来随时存储被选中卡片相关信息的全局对象 SelectedCard: var SelectedCard = { //被选中的卡对象 type: "null", //卡的来源类型（手牌，场上.
springboot + xterm.js + vue + websocket实现终端功能
12-08
1、前端框架：Vue + element-ui ...Websocket：与前端进行实时交互。 xterm：渲染web版本的terminal终端显示器。 可参考博客地址： https://blog.csdn.net/qq_29777207/article/details/108763630 售后群：491590248
WebSocket聊天室实现J-IM+SpringBoot+Zookeeper+Redis
06-10
基于t-io开发的轻量、高性能、单机支持几十万至百万在线用户IM，主要目标降低即时通讯门槛，快速打造低成本接入在线IM系统，通过极简洁的消息格式就可以实现多端不同协议间的消息发送如内置(Http、Websocket、Tcp...
SpringBoot+nacos+websocket+redis+mysql+mybatis-plus微服务项目实战
01-11
SpringBoot+nacos+websocket+redis+mysql+oracle+swagger2+mybatis-plus
使用SpringBoot及Construct2的WebSocket制作联机游戏(二)-附件资源
03-02
使用SpringBoot及Construct2的WebSocket制作联机游戏(二)-附件资源
用WebSocket制作简单的联网游戏（以Java为例）
weixin_44517742的博客
05-17 1545
这学期有一门课需要做一款可以联网的游戏，游戏使用Godot引擎。由于WebSocket简单易懂并且支持双向通信，所以我选择了它作为游戏客户端之间的交流协议。 需求分析： 每个客户端可以创建游戏房间，系统会随机生成房间号。另一个客户端在游戏界面输入房间号后即可加入房间。由于游戏是回合制问答比赛（类似Kahoot），所以每回合要求所有用户同时开始。 使用库： javax.websocket WebSocket Server部分部署在远程服务器上，用于处理各本地客户端发来的请求并且在客户端之间传递信息。Java库
即时动作类网络卡牌游戏开发真的非常难
weixin_33722405的博客
02-26 278
    我的《凤舞三国》--即时动作策略类网络手机戏从策划到实施现在已经过了16个月了。最终到今年4月(2016年4月)有望出一个内測包给众多期望代理偶家产品的发行们。蓦然回首才发现，偶从2011年3月进入手游开发行业现在已经过去5年了～ 不由发出一声感叹：“光阴如梭、人生苦短啊。”  ...
HTML+JS+websocket 实现联机“游戏王”对战（九）- 实现简单websocket通信
KalsasCaesar的博客
05-08 1419
实现简单 websocket 通信 1. WebSocket 简介： 有关websocket的简介，不了解websocket的朋友可以参考下CSDN大佬的这篇博文（侵删）： websocket 学习，简单应用 - @广积粮缓称王 这篇博文详细地介绍了websocket的工作原理和简单应用，并且还有几个非常简洁实用的案例。 2. 搭建简易WebSocket服务端： 我们在这里也实现一个简单的WebSocket服务端与客户端，方便后面介绍。 首先我们需要下载并安装node.js： 搜索node.js，官网.
HTML+JS+websocket 实现联机“游戏王”对战（二）- 联机模式
KalsasCaesar的博客
03-30 1398
HTML+JS+websocket 实战 “游戏王”（Yu-Gi-Oh) 联机卡牌对战（二） 概览 在介绍详细的游戏实现思路之前，先来谈谈游戏的核心——联机模式的实现思路。虽然游戏主体是HTML+JS且运行在浏览器上，但比起页游，该游戏的实现更像是端游，即游戏的主要文件及素材（卡牌图片，音效等）都是提安放（下载）到本地，需要的时候从本地调用。而负责实现联机的服务端只存储少量的用户信息（如用户id），用于玩家间的信息传递。具体的联机流程如下： 整体的联机模式很简易，采用前后端分离的方法。服务端在存储了双方
HTML+JS+websocket 实现联机“游戏王”对战（十）- 搭建游戏服务端
KalsasCaesar的博客
05-10 1169
搭建游戏 WebSocket 服务端 第二章联机模式的那篇博文里我们提到过，这个游戏双方玩家的通信方法是通过服务端做中介来相互传递指令。当一方玩家执行某个操作时，会将该操作的相关指令发给服务端，服务端接收后简单处理一下传给另外一位玩家，之后另外一位玩家接收并重现该指令，这样就在自己的界面里同步了对方玩家所执行的操作，比如抽牌，召唤，放置等等。 现在轮到我们来具体实现一下这个做中介的服务端： 这个服务端的消息传递机制很像上一章csdn大佬博文中的聊天室案例。我们首先在服务端构建一个空的用户数组 playe.
HTML+JS+websocket 实现联机“游戏王”对战（十三）- 实机演示视频
KalsasCaesar的博客
05-24 1048
最后一章啦，这章主要放个demo演示，然后讨论一些待改进的细节问题。 启动游戏 先来完整回顾下如何启动游戏并联机： （1）进入服务端ygo-server.js所在的文件夹，打开命令行窗口： （2）之后输入命令node ygo-server.js启动服务端： （3）接下来找到客户端的 html 文件，用浏览器打开，连接上服务端，就可以对战啦！连接成功后服务端的命令行里会有提示： 这里为了测试方便是在同一台电脑上打开了两个客户端，服务器地址是 localhost。 （3）之后双方玩家进行操作时若发
HTML+JS+websocket 实现联机“游戏王”对战（八）- 返回手卡，卡组
KalsasCaesar的博客
05-02 750
功能按键的实现（三） 书接上回，把功能按键介绍完。 1. 返回手卡： 返回手卡的操作在情况分类上较多，代码可能会比较乱，先整理一下。 选中某张卡片并执行返回手牌时，主要有几个不同的情况： 卡片来源于场上 1.1 卡片属于我方 1.2 卡片属于对方（必须是表侧表示的卡片） 卡片来源于卡组或墓地 2.1 卡片属于我方牌组/墓地 2.2 卡片属于对方墓地 不同情况下的执行逻辑与调用的函数有所不同。 “返回手卡”不允许直接操作对方牌组。 要执行“返回手卡”操作首先需要选中一张卡片，Selected.
HTML+JS+websocket 实现联机“游戏王”对战（十一）- 客户端消息的收发
KalsasCaesar的博客
05-18 629
客户端消息的发送与接收 上一章我们介绍了服务端的搭建，用于接收并转发消息，这章来实现客户端的联机机制。客户端的联机分为发送和接收，当玩家执行某些操作时会发送一条 message 通知另一位玩家（由服务端做中介转发），同样，客户端也可以接收另一位玩家的 message，执行某些操作。 在联机之前我们需要两个基本变量： var playerID = "player1"; //独立玩家ID var ws = new WebSocket("ws://localhost:9999/"); 玩家ID以及服务端的地.
vue+xterm.js+websocket实现终端
最新发布
06-09
要在 Vue 中使用 xterm.js 和 WebSocket 实现终端，你需要将用户输入的命令发送给后端，然后将后端返回的结果输出到 xterm.js 终端中。以下是一个简单的示例： ```html <template> <div id="terminal"></div> </template> <script> import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; export default { data() { return { socket: null, // WebSocket 实例 term: null, // Terminal 实例 }; }, mounted() { // 创建 WebSocket 实例 this.socket = new WebSocket('ws://localhost:8080'); // 创建 Terminal 实例 this.term = new Terminal(); const fitAddon = new FitAddon(); this.term.loadAddon(fitAddon); this.term.open(document.getElementById('terminal')); // 处理 WebSocket 消息 this.socket.onmessage = (event) => { this.term.write(event.data); }; // 处理输入事件 this.term.onData(data => { this.socket.send(data); }); // 调整终端大小 this.term.onResize(size => { const cols = size.cols; const rows = size.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }); // 发送 resize 消息 const cols = this.term.cols; const rows = this.term.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }, beforeDestroy() { // 关闭 WebSocket 连接 this.socket.close(); } } </script> ``` 以上代码中，我们首先在 `mounted` 钩子函数中创建了一个 WebSocket 实例和一个 Terminal 实例。然后我们为 WebSocket 实例添加了一个 `onmessage` 事件监听器，该监听器会在接收到服务器返回的消息时触发，我们在该事件处理函数中将消息输出到终端中。 接着，我们为 Terminal 实例添加了一个 `onData` 事件监听器，该监听器会在用户输入时触发，我们在该事件处理函数中向服务器发送用户输入的命令。同时，我们还为 Terminal 实例添加了一个 `onResize` 事件监听器，该监听器会在终端大小调整时触发，我们在该事件处理函数中向服务器发送终端大小变化的消息。 最后，我们在 `beforeDestroy` 钩子函数中关闭了 WebSocket 连接。 需要注意的是，以上代码中的 WebSocket 连接是通过 `ws://localhost:8080` 连接本地服务器的，你需要根据实际情况修改 WebSocket 连接地址。另外，代码中的消息格式和处理逻辑也需要根据实际情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值