首页 前端知识 用 websocket、JQuery开发仿微信聊天,前端开发标准

用 websocket、JQuery开发仿微信聊天,前端开发标准

2024-05-09 10:05:30 前端知识 前端哥 268 899 我要收藏

npm install express --save

服务端代码(app.js)

//创建了http服务器

var app = require(‘express’)();

var server = require(‘http’).Server(app);

var io = require(‘socket.io’)(server);

server.listen(3000);

app.get(‘/’, function (req, res) {

res.sendFile(__dirname ‘/online-chat.html’);

});

io.on(‘connection’, function (socket) {

socket.emit(‘send’, { name: ‘haha’ });

});

客户端代码(inline-chat)

在线聊天室 //必须引入

在这里插入图片描述

接收到了服务端 发过来的 消息,说明配置成功了。

3.静态页面搭建

==========================================================================

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


在这里插入图片描述

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


// express使用静态资源

app.use(require(‘express’).static(‘public’));

此时index .html


聊天室

用户登录

用户名

选择头像

    • 登录

      清流

      用户列表

        聊天室(99)

        按下Ctrl Enter发送

        发送

        css


        • {

        margin: 0;

        padding: 0;

        list-style: none;

        }

        html,

        body {

        height: 100%;

        }

        body {

        background: url(‘…/images/bg.jpg’) no-repeat center center;

        background-size: cover;

        }

        .container {

        max-width: 1000px;

        min-width: 800px;

        height: 100%;

        margin: 0 auto;

        backg

      转载请注明出处或者链接地址:https://www.qianduange.cn//article/7693.html
      标签
      websocket
      评论
      发布的文章

      FastJson 2『使用心得』

      2024-06-18 23:06:34

      fastjson(版本<=1.2.24)复现

      2024-06-18 23:06:21

      大家推荐的文章
      会员中心 联系我 留言建议 回顶部
      复制成功!