【webrtc0419 登录功能】

最新推荐文章于 2024-07-21 12:21:28 发布

拽拽就是我

最新推荐文章于 2024-07-21 12:21:28 发布

阅读量162

点赞数

分类专栏： webstorm前端学习之路文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_32355021/article/details/124565273

版权

webstorm前端学习之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通过WebRtc搭建了自己的网站，实现了登录功能。
登录界面index.js源码：

"use strict"
var unameIpt = document.querySelector("input#username");
var pwdIpt = document.querySelector("input#pwd");
var registBtn = document.querySelector("button#regist");
var loginBtn = document.querySelector("button#login");

var socket = null;
function start(){
    socket = io.connect();
    //监听来自服务器的各种消息
    socket.on("servererr",()=>{
        alert("服务器异常，请稍后重试");
    });
    socket.on("loginsuc",(uname)=>{
        alert("登录成功");
        //跳转界面
        window.location.href = "chat.html?uname="+encodeURI(uname);

    //window.location.href = "https://101.200.147.94/zhuaizhuai.jpg";
    });
    socket.on("loginerr", ()=>{
        alert("用户名或密码错误");
    });
}
start();
function login(){
    var uname = unameIpt.value.trim(); //两边清空
    var pwd = pwdIpt.value.trim();
    if (uname === "" || pwd === "") {
        alert("请输入用户名和密码！");
        return;
    }
    var secpwd = hex_md5(pwd);

    socket.emit("login", uname, secpwd); //客户端js把消息发给服务器
}

loginBtn.onclick = login;
registBtn.onclick = ()=>{
    window.location.href = "regist.html";
}

登录界面index.html源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRtc.index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="breadcrumb">
    <li><a href="#">登录</a></li>
    <li><a href="regist.html">注册</a></li>
</ul>
    <div class="container text-center" >
            <div class="row" style="margin-bottom: 10px; margin-top: 10px;">
                <div class="col-lg-2">
                    <img src="img/kouzi.jpg" style="width: fit-content; height: fit-content;">
                </div>
            </div>
            <div class="row" style="margin-bottom: 10px;">
                <div class="col-lg-2">
                    <img src="img/user.png" style="margin-bottom: 10px; width: 25px; height: 25px;">
                    <input id = "username" style="">
                </div>
            </div>
            <div class="row" style="margin-bottom: 10px;">
                <div class="col-lg-2">
                    <img src="img/michi.png" style="margin-bottom: 10px; width: 25px; height: 25px;">
                    <input id = "pwd" type="password">
                </div>
            </div>
            <div class="row" style="margin-bottom: 10px;">
                <div class="col-lg-2">
                    <button id = "regist" type="button" class="btn btn-warning" style="margin-right: 20px;">注册</button>
                    <button id = "login" type="button" class="btn btn-success">登录</button>
                </div>
            </div>
    </div>

    <script src = "./js/md5.js"></script>
    <script src = "./js/socket.io.js"></script>
    <script src = "./js/index.js"></script>

    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>

</body>
</html>