如何使用websocket和接送实现通讯
时间: 2023-08-23 22:06:59 浏览: 60
WebSocket 是一种基于 TCP 协议的全双工通信协议,可以在客户端和服务器之间建立持久连接,实现双向通信。使用 WebSocket 可以实现实时通信、在线聊天、推送服务等功能。
而 Socket.IO 是一个封装了 WebSocket 的实现的库,其提供了更加简单易用的 API,同时也支持了多种传输协议,包括 WebSocket、Flash Socket、AJAX 等。
要使用 WebSocket 和 Socket.IO 进行通信,需要先在服务端实现 WebSocket 或者 Socket.IO 的服务,然后在客户端通过 JavaScript 进行连接和通信。
以下是一个使用 Socket.IO 实现实时聊天的示例代码:
服务端代码(Node.js):
```
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
```
客户端代码(JavaScript):
```
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
$('form').submit(() => {
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', (msg) => {
$('#messages').append($('<li>').text(msg));
});
</script>
```
在上面的示例中,服务端使用了 Express 框架创建了一个 HTTP 服务器,然后使用 Socket.IO 创建了一个 WebSocket 服务。客户端则通过引入 Socket.IO 的 JavaScript 文件来连接 WebSocket,然后使用 jQuery 实现了聊天界面的交互逻辑。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)