javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 优雅使用WebSocket

一文教你如何优雅的使用WebSocket

作者:郭少

WebSocket最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种,下面这篇文章主要给大家介绍了关于如何优雅的使用WebSocket的相关资料,需要的朋友可以参考下

简介

websocket是基于TCP的一种双向通信协议。在此之前,一直是采用轮询的方式进行双向通信,这种方式效率低下还非常浪费资源。为了解决这种问题,websocket应运而生。

特性

使用场景

具体实现

一、首先是服务端代码,这里我用的是nodejs。

1、我们先新建一个websocket.js文件

// 创建websocket服务
const port = "8888"
const ws = require('nodejs-websocket');
const web_server = ws.createServer(function (conn) {
  conn.on('text', function (text) {
    console.log("发送的消息",text);
    conn.sendText(`发送成功了,发送的消息为:${text}`)
  });
  conn.on('close', function (code, reason) {
    console.log('关闭连接');
  });
  conn.on('error', function (code, reason) {
    console.log('异常关闭');
  });
}).listen(port);
exports.web_server = web_server

2、在app.js里面进行引入

const websocket = require("./websocket")

3、最后启动服务

node app

二、然后是客户端代码

① 在vue中使用

1、我们先在utils下新建一个websocket.js文件

let webSocket = null;
let socketOpen = false;

// 发送消息
export const doSend = (message) => {
  if (socketOpen) {
    webSocket.send(message)
  }
}

// 初始化websocket
export const contactSocket = () => {
  if ("WebSocket" in window) {
    webSocket = new WebSocket("ws://192.168.1.100:8888/");
    webSocket.onopen = function () {
      console.log("连接成功!");
      socketOpen = true
    };
    webSocket.onmessage = function (evt) {
      var received_msg = evt.data;
      console.log("接受消息:" + received_msg);
    };
    webSocket.onclose = function () {
      console.log("连接关闭!");
    };
  }
}

2、页面引入文件

import { contactSocket, doSend }  from '@/utils/contactSocket'

3、具体使用实例

// 初始化websocket
contactSocket()
// 发送消息内容
setTimeout(() => {
  doSend("向服务端发送的消息")
}, 1000)

② 在uniapp中使用

1、我们先在utils文件夹下新建一个websocket.js文件

let socketOpen = false;
// 发送消息
function doSend(message) {
    if (socketOpen) {
        uni.sendSocketMessage({
            data: message
        });
    } 
}

// 初始化websocket
function contactSocket() {
    // 建立连接
    uni.connectSocket({
        url: 'ws://192.168.1.100:8888/'
    });
    // 连接错误
    uni.onSocketError(function(res) {
        console.log('WebSocket连接打开失败,请检查!');
    });
    // 打开了连接
    uni.onSocketOpen(function() {
        console.log('WebSocket连接已打开!');
        socketOpen = true;
    });
    // 关闭连接
    uni.onSocketClose(function(res) {
        console.log('WebSocket 已关闭!');
    });
    // 接受消息
    uni.onSocketMessage(function(res) {
        console.log('收到服务器内容:' + res.data);
    });
}

module.exports = {
    doSend,
    websocketInit
}

2、页面引入文件

import { doSend, contactSocket } from '@/utils/websocket.js'

3、具体使用实例

// 初始化websocket
contactSocket()
// 发送消息内容
setTimeout(()=>{
    doSend("向服务端发送的消息");
},1000)

总结

到此这篇关于如何优雅的使用WebSocket的文章就介绍到这了,更多相关优雅使用WebSocket内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文