vue中使用websocket

概念部分：

1，WebSocket 是 HTML5 提供的 TCP 连接上进行全双工通讯的协议。一次握手之后，服务器和客户端可以互相主动通信，双向传输数据。

2，浏览器想服务器发送请求，建立连接之后，可通过send()方法想服务器发送数据，并通过message事件接受服务器返回的数据。

 

connectWebsocket() {
      console.log("connectWebsocket初始化");
      let websocket;
      if (typeof WebSocket === "undefined") {
        console.log("您的浏览器不支持WebSocket");
        return;
      } else {
        //let protocol = "ws";
        let url = "";
        //if (window.localtion.protocol == "https:") {
        //  protocol = "wss";
        //}
        // `${protocol}://window.location.host/echo`;
        //url = `${protocol}://localhost:9998/echo`;
        url = "ws://192.168.214.1:5011/chat/";
        console.log("打开一个websocket " +url);    
        // 打开一个websocket
        websocket = new WebSocket(url);
        // 建立连接
        websocket.onopen = () => {
          // 发送数据
          websocket.send("发送数据-----");
          console.log("websocket发送数据中");
        };
        // 客户端接收服务端返回的数据
        websocket.onmessage = evt => {
          console.log("websocket返回的数据：", evt);
        };
        // 发生错误时
        websocket.onerror = evt => {
          console.log("websocket错误：", evt);
        };
        // 关闭连接
        websocket.onclose = evt => {
          console.log("websocket关闭：", evt);
        };
      }
    },

 

————————————————

版权声明：本文为CSDN博主「小小程序员。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_39251620/article/details/124065364

 

<script>export default {  mounted() {    this.connectWebsocket();  },  methods: {    connectWebsocket() {      let websocket;      if (typeof WebSocket === "undefined") {        console.log("您的浏览器不支持WebSocket");        return;      } else {        let protocol = "ws";        let url = "";        if (window.localtion.protocol == "https:") {          protocol = "wss";        }        // `${protocol}://window.location.host/echo`;        url = `${protocol}://localhost:9998/echo`;
        // 打开一个websocket        websocket = new WebSocket(url);        // 建立连接        websocket.onopen = () => {          // 发送数据          websocket.send("发送数据");          console.log("websocket发送数据中");        };        // 客户端接收服务端返回的数据        websocket.onmessage = evt => {          console.log("websocket返回的数据：", evt);        };        // 发生错误时        websocket.onerror = evt => {          console.log("websocket错误：", evt);        };        // 关闭连接        websocket.onclose = evt => {          console.log("websocket关闭：", evt);        };      }    }  }};</script>————————————————版权声明：本文为CSDN博主「小小程序员。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_39251620/article/details/124065364