2024年Web前端最新WebSSH进阶之实时监控和强制下线，前端开发培训心得

最新推荐文章于 2024-05-11 08:40:16 发布

参考信息

最新推荐文章于 2024-05-11 08:40:16 发布

阅读量984

点赞数 19

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/java_dazhuzhu/article/details/138476611

版权

程序员专栏收录该内容

197 篇文章 1 订阅

订阅专栏

文章详细介绍了如何在前端开发中使用WebSocket与SSH进行连接，实现WebSSH的实时监控功能，包括学习笔记、连接管理、MonitorConsumer的创建与通信机制，以及基本的网络概念如HTTP缓存、HTTPS、TCP/IP协议等。

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

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

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

这里分享一些前端学习笔记：

html5 / css3 学习笔记
JavaScript 学习笔记
Vue 学习笔记

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

}

)

至此，监控功能就算完成了，什么？前端页面怎么弄？参考下之前的WebSSH界面，几乎可以完全复制

踢用户下线

踢用户下线就比较简单了，逻辑是点击页面上的强制结束按钮，给后端view发送个请求带上这条记录的ID，view拿到ID后，通过ID找到group_name，然后向group发送disconnect消息，这个group里的所有channel在收到disconnect消息后就会断开连接了

from asgiref.sync import async_to_sync