用 websocket、JQuery开发仿微信聊天_jquery websocket

作者：天景科技苑 | 2024-08-19 22:19:44

踩

jquery websocket

1项目展示

登陆界面

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

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

2项目基本配置

2.1参考文档 socket.io

先引入 socket.io插件

npm install --save socket.io
1

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

npm install express --save
1

服务端代码（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' });

});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

客户端代码（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

3.静态页面搭建

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

在这里插入图片描述

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

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

此时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: none;">
      <!-- 用户列表 -->
      <div class<
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/1003913