springboot websocket 跨域_前端websocket框架

全栈程序员站长

发布于 2022-11-14 16:07:48

1.9K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议,可以实现跨域访问。 websocket安装命令 npm i ws -S 服务器端：

let WebServerSocket = require("ws").Server;
let wss = new WebServerSocket({ 
port:8200});
const mysql = require("mysql2");
//数据库连接
let connection = mysql.createConnection({ 

host:"localhost",
user:"root",
password:"123",
database:"firstdb",
charset:"utf8"
});
// websocket服务端
// 连接成功后，会执行回调函数返回一个ws参数
wss.on("connection",function(ws){ 

// 返回对象数据
let obj = { 

name:"mary",
sex:"女"
};
// 推送数据
setInterval(() => { 

//查询数据库中的信息并推送给页面
// 从mysql数据库中获取数据(待定)
// let sql = "SELECT * FROM chat";
// let rows = connection.promise().query(sql);
// ws.send(JSON.stringify(rows));
ws.send(JSON.stringify(obj));
}, 1000);
//插入到数据中 
ws.onmessage = function(data){ 

console.log(data);
}
// 错误信息
ws.onerror = function(error){ 

console.log(error);
}
// 关闭协议
// ws.close();
});

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>websocket主页</h1>
评论：<input type="text" clas s="ipt">
<button class="btn">推送数据到服务器</button>
<script> // 同源写相对路径，不同源要写全称  // 同源： 协议 域名 端口号必须全部一致  // 非同源：跨域  // 客户端  let ws = new WebSocket("ws://localhost:8200"); //建立连接 ws.onopen = function () { 
 //打开协议 console.log("连接成功"); } ws.onmessage = function (mes) { 
 //发送数据到服务端 console.log(mes); } // ws.addEventListener("message", function (e) {}); document.querySelector(".btn").onclick = function () { 
 let iptvalue = document.querySelector(".ipt").value; console.log("客户端发送给服务端的信息：" + iptvalue); ws.send(iptvalue); //如果服务端关闭协议后，即执行ws.close()后,此时会报错： WebSocket is already in CLOSING or CLOSED state. }; // 报错 426 Upgrade Required  // 426是一种HTTP协议的错误状态代码，表示服务器拒绝处理客户端使用当前协议发送的请求，但是可以接受其使用升级后的协议发送的请求 // 我们设置的端口号是8200，直接在浏览器地址栏输入访问不了，使用visual studio code自带的服务器(Live Server)打开(跨域访问) // http://127.0.0.1:5500/mysqlTest/websocket/index.html  // 或者http://localhost:5500/mysqlTest/websocket/index.html  </script>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/187275.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月1日，如有侵权请联系 cloudcommunity@tencent.com 删除

https