企业网站哪家好,门户网站的推广方案,成都网站建设 城,重庆公司专业建站需求#xff1a;node做后端根据websocket#xff0c;连接数据库#xff0c;数据库的字段改变后#xff0c;前端不用刷新页面也能更新到数据#xff0c;前端也可以发送消息给后端#xff0c;后端接受后把前端消息做处理再推送给前端展示
1.初始化node#xff0c;生成pac…需求node做后端根据websocket连接数据库数据库的字段改变后前端不用刷新页面也能更新到数据前端也可以发送消息给后端后端接受后把前端消息做处理再推送给前端展示
1.初始化node生成package.json和package-lock.js npm init -y
2.安装express、socket.io、cors
3.创建app.js并编写代码
使用node ./websocket.js运行项目
npm install express socket.io cors -S
建立websocket.js
const app require(express)();
const http require(http).createServer(app);
const io require(socket.io)(http);
const fs require(fs);
const cors require(cors);
// 使用 cors 中间件允许跨域请求
// 配置跨域选项
const corsOptions {origin: *, // 指定允许的来源methods: [GET, POST], // 允许的请求方法credentials: true // 允许发送凭据如 cookies
};
app.use(cors(corsOptions));
// 创建数据库连接
const mysql require(mysql);
const connection mysql.createConnection({host: localhost,//数据库连接域名user: root,//数据库账号password: 123456,//密码database: graduation_design//要连接的数据库名
});
connection.connect();// 监听客户端连接事件
io.on(connection, (socket) {console.log(A client connected);//查询表connection.query(SELECT * FROM shelves, (error, results) {if (error) throw error;//数据推送到前端socket.emit(data, results);},)// 发送数据到客户端setInterval(() {// 查询数据库并发送数据到客户端connection.query(SELECT * FROM shelves, (error, results) {if (error) throw error;socket.emit(data, results);},)}, 60 * 1000);//接收到客户端的消息后再推送给客户端socket.on(message, (message) {console.log(接收到客户端消息, message);socket.emit(messagedata, message);})// 监听客户端断开连接事件socket.on(disconnect, () {console.log(A client disconnected);});
});// 启动服务器
http.listen(3000, () {console.log(WebSocket server is running on port 3333);
});
4.前端使用socket.io-client
npm install socket.io-client
在需要使用websocket连接的页面引入
templatediv classcontent-boxdiv classcontainer{{ data }}el-button clickconnectWebscoket连接websocket/el-buttonel-button clickgasong发送/el-buttonel-button clickstop停止连接/el-buttonhr /{{ msgdata }}/div/div
/templatescript
import io from socket.io-client
let socket null
export default {data() {return {data: null,msgdata: }},mounted() {},methods: {connectWebscoket() {// 解决跨域问题socket io(http://localhost:3333, {transports: [websocket],withCredentials: true, //白名单extraHeaders: {//请求头Access-Control-Allow-Origin: http://localhost:8080}})socket.on(data, (data) {this.data data})socket.on(messagedata, (msg) {this.msgdata msg})},gasong() {socket.send(Hello from client!)},stop() {socket.close()}}
}
/scriptstyle langscss scoped/style 此时已经建立好websocket的连接
