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

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

      • 27
        点赞
      • 20
        收藏
        觉得还不错? 一键收藏
      • 0
        评论

      “相关推荐”对你有帮助么?

      • 非常没帮助
      • 没帮助
      • 一般
      • 有帮助
      • 非常有帮助
      提交
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值