前端与后台交互之websocket_websocket前后端交互

作者：煮酒与君饮 | 2024-07-31 02:09:23

踩

websocket前后端交互

作者原文

1、了解websocket

1、关于websocket的学习官网：socket.io。
2、websocket是一门前后端交互的通信技术，是HTML5引入的api，主要是为了弥补http协议上的不足之处。
3、websocket可以实现服务端主动给客户端推送消息，有些消息可以通过服务端的广播散播消息。例如web版的即时聊天（IM）工具。
4、websocket还可实现web游戏的开发哦。
5、websocket底层使用的是websocket协议，也是一种b/s通信模式，要是用websocket，前提是存在一个websocket服务器，然后使用客户端的websocket去连接服务器，一旦连接建立起来，服务器就可以向客户端推送消息，客户端也可以向服务端要数据。
6、构建websocket服务器，就必需要引入第三方的库来实现即socket.io
7、websocket是基于http协议的，所以就必须要搭建一个web服务器，这个时候就需要引入一个express模块了
8、websocket与ajax生命周期的不同的是：websocket建立的是长连接，会在一个会话中一直保持连接；而ajax是短连接，数据发送完成和接收完成后就断开连接了。同时websocket一般用于前后实时交互，而aja用于前后端非实时交互。
相应的服务网站有：
IM
融云
 环信

2、好了，下面是代码实操：

<!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>
</head>
<body>
</body>
	<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.js"></script>
<!-- 在客户端的首先第一步，必须先引入socket.io这个库 -->
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <script>
        // 在引入这个socket.io这个库的时候，就已经将io()这个全局方法暴露出来
        //建立一个有效的url、地址
        var url = 'http://localhost:3000';

        //客户端请求连接到websocket服务器
        var socket = io(url);

        //判断是否连接成功
        socket.on('connect',()=>{
            console.log('connecting....');
        });

        //监听服务器传送过来的msg事件处理程序
        socket.on('msg', 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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

下面是服务端代码：

  //由于websocket服务是基于web服务器的http协议的底层，所以需要引入express模块
const express = require('express');

const app = express();

app.use(express.static('public'));

app.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

//开启一个websocket服务
const http = require('http').createServer(app);

//引入socket.io,io监听了一个连接请求，一旦客户端连接到websocket服务器，connection就能够触发
//回调函数就能够执行
const io = require('socket.io')(http);

//推送消息的代码，必须写到触发connection的回调函数中
//其中的socket代表的是当前客户端
io.on('connection', function(socket){
  console.log('a user connected');
  //服务器主动向客户端推送消息，有字符串msg标识的嵌套字发出事件处理程序
  //emit表示给客户端推送信息，
  //其中emit的参数1：表示触发推动的事件   参数2：表示的推送的内容
  socket.emit('msg',{id:1,username:'程序中一个迷途小书童',title:'幸福大概就是你喜欢粘着的那个人'});
});

var port = 3000;
http.listen(port, ()=>{
  console.log('this server is running at ' + port);
});

module.exports = app;

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

这样的话，使用指令nodemon app.js运行的时候，在浏览器中打开http://localhost:3000/chat.html，就能看到以下信息了。

[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] starting `node app.js`
this server is running at 3000
a user connected
1
2
3
4
5

-在浏览器端打开控制台就可以看到如下服务端给客户端推送的信息

好了，9527，要去继续学习新的知识点咯。毕竟我也是一个程序中迷途的小书童嘛！嘻嘻

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