用 websocket、JQuery开发仿微信聊天

最新推荐文章于 2024-05-07 04:56:22 发布

前端阳光

最新推荐文章于 2024-05-07 04:56:22 发布

阅读量1k

点赞数

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

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

版权

1项目展示

登陆界面

不同的端口登陆属于不同的用户

登陆两个端口号后的界面
在这里插入图片描述

2项目基本配置

2.1参考文档 socket.io

先引入 socket.io插件

npm install --save socket.io

因为是基于express的，所以还需要install express；

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）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天室</title>
</head>
<body>
   
</body>
<script src="/socket.io/socket.io.js"></script>  //必须引入
<script>
    var socket = io('http://localhost:3000');  //请求3000端口
        socket.on('send', function (data) {
      
        console.log(data);  
    });
</script>
</html>

在这里插入图片描述
接收到了服务端发过来的消息，说明配置成功了。

3.静态页面搭建

创建一个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="" /></li>
      </ul>
      <button class="weui-btn" id="loginBtn">登录</button>
    </div>
    <div class="container" style="display