2024年最全WebSSH进阶之实时监控和强制下线(1)，web前端面试会问什么

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

group=self.group_name,

channel=self.channel_name,

cols=ssh_connect_args.get(‘cols’),

rows=ssh_connect_args.get(‘rows’),

is_connecting=True

)

async_to_sync(self.channel_layer.group_add)(

self.group_name,

self.channel_name

)

self.accept()

WebSocket连接成功后，连接ssh

self.ssh = SSHBridge(self.therecord, websocket=self)

self.ssh.connect(**ssh_connect_args)

def disconnect(self, close_code):

将连接状态置为False

self.therecord.is_connecting = False

self.therecord.save()

async_to_sync(self.channel_layer.group_discard)(

self.group_name,

self.channel_name

)

self.ssh.close()

def receive(self, text_data=None):

text_data = json.loads(text_data)

if text_data.get(‘flag’) == ‘resize’:

self.ssh.resize_pty(cols=text_data[‘cols’], rows=text_data[‘rows’])

else:

self.ssh.shell(data=text_data.get(‘data’, ‘’))

def ssh_message(self, event):

self.send(text_data=json.dumps(

event[‘message’]

))

在connect连接建立时新建一条记录，存储主机、用户、group_name、channel_name以及初始窗口的cols、rows信息，同时标记is_connecting为True，这里的group_name命名与文章『堡垒机的核心武器：WebSSH录像实现』中我们定义的录像文件名规则一致，另外将这篇文章中新建录像记录的操作从SSHBridge.record中给转到了连接建立的connect中来，更合理也更方便

在disconnect连接关闭时，将is_connecting标记为False，这样我们在前端页面上就可以根据这个标记来判断WebSSH是否正在连接，如果连接则展示监控和强制结束按钮，否则展示播放和命令提取按钮

同时添加个ssh_message方法，用来接收发送到组的数据

到这里，我们已经将WebSSH改造成了支持layer的模式，那么接下来就是要在用户点击监控的时候将用户与服务端建立的连接channel加入到上述group中

新建一个名为MonitorConsumer的consumer，主要用来处理监控连接

class MonitorConsumer(WebsocketConsumer):

def connect(self):

pk = self.scope[‘url_route’][‘kwargs’].get(‘id’)

self.group_name = Record.objects.get(id=pk).group

async_to_sync(self.channel_layer.group_add)(

self.group_name,

self.channel_name

)

self.accept()

判断用户已经结束了这个webssh连接时就关闭监控

self.connecting = Record.objects.get(id=pk).is_connecting

if not self.connecting:

self.close()

def disconnect(self, close_code):

async_to_sync(self.channel_layer.group_discard)(

self.group_name,

self.channel_name

)

self.close()

def receive(self, text_data=None):

pass

def ssh_message(self, event):

self.send(text_data=json.dumps(

event[‘message’]

))

MonitorConsumer与SSHConsumer有两个地方不一样，其一是SSHConsumer中我们直接新生成了个group_name，而MonitorConsumer中需要在connect时获取到要监控的ID，然后通过ID拿到group_name，将monitor连接加入到这个group，其二是监控只能看，不能操作，所以也不需要前端发送数据的term.on和Consumer的receive处理数据

最后需要修改SSHBridge方法中发送给websocket的指令，从self.websocket.send改为发送到group的模式，如下

async_to_sync(self.websocket.channel_layer.group_send)(

self.group_name,

{

‘type’: ‘ssh.message’,

‘message’: message

}

)

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**