这是一个流行的 Javascript 框架，用于构建用户界面和单页应用程序。它的响应式数据绑定和组件化特性使得构建前端界面更加便捷。

Express 是一个基于 Node.js 的 Web 应用程序框架，用于构建后端服务器。它提供了路由、中间件和简化了 HTTP 请求处理的工具，使得构建服务器端应用更加简单和灵活。

WebSocket 是一种在单个 TCP 连接上提供全双工通信的协议。它允许客户端和服务器之间实现持久的、低延迟的连接，适用于实时性要求高的应用，比如聊天应用、实时协作工具等。

链接: 仓库地址

使用elmentUI提供的表单组件，这里只需要输入用户名即可。

添加表单验证的规则，首先不能为空其次长度最多1-10个字符，并将用户名存储在sessionStorage，登录成功会跳转到聊天室主页，登录成功或失败都会有对应的消息提示。

展示了主要的聊天界面，包括用户昵称、头像、时间戳等，其中包括了一些自定义的组件。

mounted是vue中的一个钩子函数，在初始化页面完成后对尝试对WebSocket进行连接。在连接成功后存储一下服务器生成的userId以便后续区分不同的用户。

在路由方面添加一个全局导航守卫，用户需要先登录才能聊天。

后端使用了express-ws处理WebSocket请求,需要注意的是发送JSON数据需要先通过JSON.stringify()方法转为字符串，前端处理时再通过JSON.parse()方法转回JSON。这里还定义了一个函数，用于生成用户的Id，为了方便前端区分用户发送的消息和接受的消息。