04----3小时 用 websocket 实现聊天室 之实现简单登陆

/*

1. 连接socketio服务

*/

var socket = io(‘http://localhost:3000’)

var username, avatar

/*

2. 登录功能

*/

$(‘#login_avatar li’).on(‘click’, function() {

$(this)

.addClass(‘now’)

.siblings()

.removeClass(‘now’)

})

// 点击按钮，登录

$(‘#loginBtn’).on(‘click’, function() {

// 获取用户名

var username = $(‘#username’)

.val()

.trim()

if (!username) {

alert(‘请输入用户名’)

return

}

// 获取选择的头像

var avatar = $(‘#login_avatar li.now img’).attr(‘src’)

// 需要告诉socket io服务，登录

socket.emit(‘login’, {

username: username,

avatar: avatar

})

})

// 监听登录失败的请求

socket.on(‘loginError’, data => {

alert(‘用户名已经存在’)

})

// 监听登录成功的请求

socket.on(‘loginSuccess’, data => {

// 需要显示聊天窗口

// 隐藏登录窗口

$(‘.login_box’).fadeOut()

$(‘.container’).fadeIn()

// 设置个人信息

console.log(data)

$(‘.avatar_url’).attr(‘src’, data.avatar)

$(‘.user-list .username’).text(data.username)

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

tps://bbs.csdn.net/topics/618166371)**

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-t8h39Gj6-1714231176528)]