10-vue移动端项目(websocket的简单案例与创建一个聊天室)_websocke实例,vue

作者：Cpp五条 | 2024-05-21 06:19:59

踩

websocke实例,vue

WebSocket

01- 什么是WebSocket

它与 http 协议一样，也是一种通讯协议

http 协议：

作用：规范浏览器与服务器交互的一种标准。
特点：
- 每次浏览器与服务器之间进行交互都需要重复开启和断开连接
- 请求只能由浏览器主动发送，服务器被动响应
总结：
- 由于以上两个特点，让 http 协议在某些场合下不适用。比如说：实时聊天。

websocket 协议：

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话

作用：一种通讯协议
特点：
- 一旦浏览器与服务器建立连接之后，不会轻易断开
- 交互可以由服务器主动发起，也可以由浏览器主动发起
总结：
- 由于 websocket 的两个特点，它非常适合用来完成实时聊天

02 - 基本使用

socket.io网站示例传送门

总结： websocket 的运行流程

1）需要一个服务器
2）需要一个客户端（浏览器）
3）由客户端连接服务器
4）服务器端响应连接成功的状态
5）由客户端向服务器发送消息
6）服务器接收消息
7）服务器响应消息到客户端
8）客户端接收消息
9）关闭连接

03 - 简单的客户端演示：

这里是一个简单的客户端显示，所以服务器是人家已经建好的

     // 创建一个websocket实例
        // 由客户端与服务器建立连接
        var ws = new WebSocket("wss://echo.websocket.org")
        // 客户端建立连接成功后的回调函数
        ws.onopen = function (evt) {
            console.log('连接成功...')
            //   连接成功后客户端发送消息给服务器
            ws.send('hellow! websocket')
        }
        // 客户端成功接收服务器响应的消息执行的回调函数
        ws.onmessage = function (evt) {
            console.log('服务器响应回来的消息是' + evt.data)
            // 关闭连接
            ws.close()
        }
        // 关闭连接成功后的回调函数
        ws.onclose = function () {
            console.log('关闭成功')
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

04 - 完成一个聊天室

使用一个基于 websocket 的第三方包 socket.io 来完成聊天室

服务器

客户端

demo传送门

步骤：

1.0 创建一个服务器
- 创建一个文件夹
- 初始化这个项目： npm init -y
- 下载 express
- 使用 express 来开启服务器
2.0 创建一个客户端
- 在项目中创建一个文件夹：view
- 在文件夹中创建一个静态页面 index.html
- 在 index.html 完成聊天的结构
- 在请求根目录时，将这个 html 页面响应浏览器，当作客户端
3.0 在服务器中开启 websocket
- 在服务器中下载 socket.io
- 在服务器中开启 socket.io
4.0 在客户端中连接这个 websocket
- 在客户端页面中导入 socket.io 文件
- 在客户端页面中创建一个 socket.io 对象
5.0 客户端向服务器发送消息
- 导入 jquery
- 给 form 元素添加一个提交事件
- 在事件中：
  - 将输入框中的内容提交到服务器
    - socket.emit(‘sendmsg’, xxx)
  - 提交之后将输入框清空
6.0 服务器接收客户端的消息
- 在 connection 中接收客户端传入的消息
  - socket.on(‘sendmsg’ , xxx => { })
7.0 服务器响应客户端消息
- 在接收到消息之后，可以直接将消息返回给客户端
  - socket.emit(‘serverSend’, xxx)
8.0 客户端接收服务器消息
- scoket.on(‘serverSend’, xxx => {})

总结：

客户端向服务器发送数据：
- socket.emit(key, value)
服务器接收客户端数据：
- socket.on(key, v => { // v 就是接收的参数 })
服务器向客户端发送数据
- 消息回复：socket.emit(key, value)
- 消息广播：io.emit(key, v => {} )
客户端接收服务器的数据
- socket.on(key, v => {})

index.js(服务端器):

// 创建一个服务器

// 导入express
const app = require('express')()
// 导入http模块,根据app,创建一个服务
const http = require('http').createServer(app)
//1. 导入socket.io
const io = require('socket.io')(http)

//设置响应给用户看的内容
app.get('/', (req, res) => {
    // 请求根目录时返回这个静态页面
    res.sendFile(__dirname + '/views/index.html')
})
// 4. 开启websocket连接
io.on('connection', (socket) => {
    //  6. 服务端接受参数
    // 这里的socket是,谁发消息回来就是谁
    // io是socket对象
    socket.on('passmsg', msg => {
        // console.log(msg)
        console.log(socket)
        // 7. 将接收到的消息响应给客户端
        // socket.emit('passmsg', msg) //消息的回复
        io.emit('passmsg', msg) // 消息的广播
    })
})
// 打开服务器
http.listen(3000, () => {
    console.log('开启成功')
})
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

views文件夹中的index.html(客户端):

<!doctype html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        form {
            background: #000;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        form input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: 0.5%;
        }

        form button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages li {
            padding: 5px 10px;
        }

        #messages li:nth-child(odd) {
            background: #eee;
        }
    </style>
</head>

<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
</body>
<!-- 2.导入socket -->
<script src="/socket.io/socket.io.js"></script>
<!-- 导入jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        // 3. 创建一个socket对象,连接服务器
        const socket = io('http://192.168.14.52:3000/')
        // 5. 客户端向服务端发送消息
        //给form添加一个提交事件
        $('form').submit(function (e) {
            e.preventDefault(); //阻止默认行为
            // io创建的socket对象
            socket.emit('passmsg', $('#m').val())
            // 清除输入框的内容
            $('#m').val('')
            return false
        })
        // 8.客户端接收服务端的消息
        socket.on('passmsg', msg => {
            //接收到的msg渲染到ul中
            // 创建一个li标签 
            // var li = $('<li>')
            // // 给li标签设置内容
            // li.html(msg)
            // // 将li添加到ul中
            // $('#messages').append(li)
            $('#messages').append($('<li>').html(msg))
        })
    })
</script>

</html>
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

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