03----3小时用 websocket 实现聊天室之项目静态页面搭建

最新推荐文章于 2021-07-14 09:11:49 发布

前端阳光

最新推荐文章于 2021-07-14 09:11:49 发布

阅读量551

点赞数

分类专栏：前端全栈文章标签： h5&websocket实现聊天室

本文链接：https://blog.csdn.net/weixin_43964148/article/details/99739517

版权

创建一个public文件夹，把所有静态资源都放进public文件夹中，如图所示

在这里插入图片描述

由于要使用public的静态资源，必须使用express 中的语句

// express使用静态资源
app.use(require('express').static('public'));

此时index .html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>聊天室</title>
    <link rel="stylesheet" href="lib/jquery-mCustomScrollbar/css/jquery.mCustomScrollbar.min.css"/>
    <link rel="stylesheet" href="lib/jquery-emoji/css/jquery.emoji.css"/>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class="login_box" style="display: block;">
      <h3>用户登录</h3>
      <p>用户名</p>
      <input type="text" placeholder="请输入用户名" id="username" />
      <p>选择头像</p>
      <ul class="avatar" id="login_avatar">
        <li class="now"><img src="images/avatar01.jpg" alt="" /></li>
        <li><img src="images/avatar02.jpg" alt="" /></li>
        <li><img src="images/avatar03.jpg" alt="" /></li>
        <li><img src="images/avatar04.jpg" alt="" /></li>
        <li><img src="images/avatar05.jpg" alt="" /></li>
        <li><img src="images/avatar06.jpg" alt="" /></li>
        <li><img src="images/avatar07.jpg" alt="" /></li>
        <li><img src="images/avatar08.jpg" alt="" /></li>
        <li><img src="images/avatar09.jpg" alt="" /></li>
        <li><img src="images/avatar10.jpg" alt

最低0.47元/天解锁文章

前端阳光

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
03----3小时用 websocket 实现聊天室之项目静态页面搭建

创建一个public文件夹，把所有静态资源都放进public文件夹中，如图所示由于要使用public的静态资源，必须使用express 中的语句// express使用静态资源app.use(require('express').static('public'));此时index .html<!DOCTYPE html><html lang="en"> ...
复制链接

扫一扫