Websocket跨域访问

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();
});

客户端:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>

你可能感兴趣的:(NodeJS)