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

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;

  background-color: pink;

  }

  .user-list {

  width: 280px;

  height: 100%;

  float: left;

  position: relat