本篇博客只是一个demo，具体应用还要结合项目实际情况，以下是目录结构：

1.首先通过express搭建一个本地服务器

npm install express

2.在serve.js中自定义测试数据 

const express = require('express');

const app = express();

const http = require('http');

const server = http.createServer(app);

app.get('/', (req, res) => {

res.send('服务器搭好了');

});

app.get('/list', (req, res) => {

res.send([

{ id: 1, name: 'Tom', age: 18 },

{ id: 2, name: 'Jerry', age: 12 },

{ id: 3, name: 'houseHolder', age: 30 }

]);

});

// 0.0.0.0 表示监听当前机器所有ip 包含本机ip和外网ip

server.listen(2000, '0.0.0.0', () => {

console.log('127.0.0.1:2000');

});

3.运行服务器

node serve.js

注：如何查看所有ip ？（本地+外网ip）

npm install http-server

终端直接输入：http-server

4.测试服务器是否开启

发送请求，可以拿到返回的数据，服务器开启成功

 5.通过 socket.io-client 实现客户端代码

npm install socket.io-client

6.创建websocket服务器

const express = require('express');

const app = express();

const http = require('http');

const server = http.createServer(app);

+const { Server } = require("socket.io");

+// 创建了一个websocket服务器,并解决了跨域的问题

+const io = new Server(server, { cors: true });

+// 监听与客户端的连接事件

+io.on('connection', socket => {

console.log('服务端连接成功');

// 监听浏览器传过来的事件

socket.on('handle', (e) => {

console.log(e, 'app传过来的数据');

socket.emit('message', e);

})

})

app.get('/', (req, res) => {

res.send('服务器搭好了');

});

app.get('/list', (req, res) => {

res.send([

{ id: 1, name: 'Tom', age: 18 },

{ id: 2, name: 'Jerry', age: 12 },

{ id: 3, name: 'houseHolder', age: 30 }

]);

});

// npm install -g http-server查看所有ip 0.0.0.0 表示监听当前机器所有ip 包含本机ip和外网ip

server.listen(2000, '0.0.0.0', () => {

console.log('127.0.0.1:2000');

});

 7.在app/index.js中导入socket.io的cdn线上包，并连接本地服务器

Document

8.连接成功客户端和服务器都可以获取input框的值

 

 9.优化：解决断线重连问题

思路：客户端在监听是否和服务端连接成功的函数中，监听断线函数，如果连接失败设置定时器每3s重新建立连接

Document

文章链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：