socketio 实现websocket demo
时间: 2023-09-06 15:02:41 浏览: 64
Socket.IO 是一个基于 Node.js 的实时应用程序框架,它通过 WebSocket 提供了双向的、实时的通信机制。下面是一个使用 Socket.IO 实现 WebSocket 的示例:
1. 首先,确保你已经安装了 Node.js 和 Socket.IO。你可以通过在终端中运行 `npm install socket.io` 来安装 Socket.IO。
2. 创建一个新的 Node.js 项目,并在项目中创建一个名为 `app.js` 的文件。
3. 在 `app.js` 中,导入 `socket.io` 模块并创建一个 HTTP 服务器:
```javascript
const http = require('http');
const socketIO = require('socket.io');
const server = http.createServer();
const io = socketIO(server);
```
4. 监听连接事件,并在事件处理程序中定义与客户端通信的逻辑:
```javascript
io.on('connection', (socket) => {
console.log('New client connected');
// 监听客户端发送的消息事件
socket.on('message', (data) => {
console.log('Received message:', data);
// 向客户端发送响应消息
socket.emit('response', 'Server received your message');
});
// 监听客户端断开连接事件
socket.on('disconnect', () => {
console.log('Client disconnected');
});
});
```
5. 启动服务器并监听指定端口:
```javascript
const port = 3000;
server.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
```
6. 在客户端的 HTML 文件中,添加 Socket.IO 的脚本并连接到服务器:
```html
<script src="https://cdn.socket.io/socket.io-3.1.3.min.js"></script>
<script>
const socket = io.connect('http://localhost:3000');
// 发送消息给服务器
socket.emit('message', 'Hello Server');
// 监听服务器发送的响应消息
socket.on('response', (data) => {
console.log('Received response:', data);
});
</script>
```
7. 运行服务器,并在浏览器中打开客户端的 HTML 文件。你将看到控制台上显示的连接和消息输出。
这就是使用 Socket.IO 实现 WebSocket 的一个简单示例。你可以根据自己的需求扩展该示例,并添加更多的事件和逻辑。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)