前端websocket开发

Myth丶恋晨 2021-10-12 20:35 449阅读 0赞

时至今日，websocket在前端开发中占据着很重要的地位，如极其常用的心跳检测功能。甚至还有大量的站点以其作为主要的数据传输工具以替代Ajax，以下我们来介绍下如何正常地使用websocket进行前端开发。

## 安装 ##

首先引用websocket模块。当然你也可以自己去实现，为了避免重复造轮子，我们开源的websocket包。

npm install websocket

## 初始化 ##

var W3CWebSocket = require('websocket').w3cwebsocket;

## 示例 ##

let W3CWebSocket = require('websocket').w3cwebsocket;
     
    let client = new W3CWebSocket('ws://localhost:8080/', 'echo-protocol');
     
    client.onerror = function() { 
        console.log('Connection Error');
    };
     
    client.onopen = function() { 
        console.log('WebSocket Client Connected');
     
        function sendNumber() { 
            if (client.readyState === client.OPEN) { 
                let number = Math.round(Math.random() * 0xFFFFFF);
                client.send(number.toString());
                setTimeout(sendNumber, 1000);
            }
        }
        sendNumber();
    };
     
    client.onclose = function() { 
        console.log('echo-protocol Client Closed');
    };
     
    client.onmessage = function(e) { 
        if (typeof e.data === 'string') { 
            console.log("Received: '" + e.data + "'");
        }
    };

## 浏览器兼容性介绍 ##

**火狐**  
Firefox 7-9 (Old) (Protocol Version 8)  
Firefox 10+ (Protocol Version 13)

**谷歌**  
Chrome 14,15 (Old) (Protocol Version 8)  
Chrome 16+ (Protocol Version 13)

**IE**  
Internet Explorer 10+ (Protocol Version 13)

**Safari**  
Safari 6+ (Protocol Version 13)

发表评论取消回复

表情：

评论列表（有 0 条评论，449人围观）

还没有评论，来说两句吧...

相关阅读

相关前端如何使用WebSocket发送消息

系列文章目录 -------------------- 文章目录系列文章目录前言一、WebSocket的基本原理二、在前端使用We

古城微笑少年丶/ 2023年10月15日 10:01/ 0 赞/ 132 阅读

相关 Netty——WebSocket开发

目录 1、WebSocket协议 1.1、协议简介 1.2、WebSocket连接建立 1.3

缺乏、安全感/ 2023年10月14日 09:23/ 0 赞/ 4 阅读

相关前端实现WebSocket即时通讯

要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。 HTTP 协议无法做到

超、凢脫俗/ 2023年01月24日 02:13/ 0 赞/ 280 阅读

相关前端实现一个websocket

websocket 是h5中新增的协议，面向长连接，用于服务器和本地保持通讯，在聊天或者大数据实时响应的时候用的到； websocket 协议是 ws开头的 readySt

短命女/ 2022年12月31日 01:25/ 0 赞/ 146 阅读

相关 Netty协议开发（WebSocket）

WebSocket是H5开始提供的一种游览器与服务器间进行双全工通信的网络技术，WebSocket通信协议与2011年被IETF定义为标准RFC6455，WebSocket A

﹏ヽ暗。殇╰゛Y/ 2022年05月14日 15:26/ 0 赞/ 265 阅读

相关 HTML5 前端原生 WebSocket 通信

目录 HTML5 原生 WebSocket 创建 WebSocket 对象 WebSocket 属性 WebSocket 事件 WebSocket 方法 webSo

短命女/ 2022年05月10日 17:34/ 0 赞/ 244 阅读

相关 Web前端之WebSocket

什么是WebSocket？ WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket API中，

桃扇骨/ 2022年03月11日 04:16/ 0 赞/ 518 阅读

相关前端 - 轮询, 长轮训, websocket

轮询概念 ajax 轮询的原理很简单，让浏览器间隔几秒就发送一次请求，询问服务器是否有新信息代码 function showUnreadNews

Dear 丶/ 2022年01月12日 13:21/ 0 赞/ 337 阅读

相关前端websocket开发

时至今日，websocket在前端开发中占据着很重要的地位，如极其常用的心跳检测功能。甚至还有大量的站点以其作为主要的数据传输工具以替代Ajax，以下我们来介绍下如何正常地使用

Myth丶恋晨/ 2021年10月12日 20:35/ 0 赞/ 450 阅读

相关前端 WebSocket 配置

JS <!DOCTYPE html> <html lang="en"> <head> <meta charset="

た入场券/ 2021年09月18日 09:00/ 0 赞/ 302 阅读