原生 javascript 操作 websocket

为什么80%的码农都做不了架构师？>>>

es6 语法对 WebSocket 的定义

interface WebSocket extends EventTarget {binaryType: string;readonly bufferedAmount: number;readonly extensions: string;onclose: (this: WebSocket, ev: CloseEvent) => any;onerror: (this: WebSocket, ev: Event) => any;onmessage: (this: WebSocket, ev: MessageEvent) => any;onopen: (this: WebSocket, ev: Event) => any;readonly protocol: string;readonly readyState: number;readonly url: string;close(code?: number, reason?: string): void;send(data: any): void;readonly CLOSED: number;readonly CLOSING: number;readonly CONNECTING: number;readonly OPEN: number;addEventListener<K extends keyof WebSocketEventMap>(type: K, listener: (this: WebSocket, ev: WebSocketEventMap[K]) => any, useCapture?: boolean): void;addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

构造器

WebSocket WebSocket(in DOMString url, in optional DOMString protocols);
WebSocket WebSocket(in DOMString url,in optional DOMString[] protocols);

方法

void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);

事件

`onclose`	`EventListener`	用于监听连接关闭事件监听器。当 WebSocket 对象的readyState 状态变为 CLOSED 时会触发该事件。这个监听器会接收一个叫close的`CloseEvent` 对象。
`onerror`	`EventListener`	当错误发生时用于监听error事件的事件监听器。会接受一个名为“error”的event对象。
`onmessage`	`EventListener`	一个用于消息事件的事件监听器，这一事件当有消息到达的时候该事件会触发。这个Listener会被传入一个名为"message"的`MessageEvent` 对象。
`onopen`	`EventListener`	一个用于连接打开事件的事件监听器。当`readyState`的值变为 OPEN 的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为"open"的事件对象。

测试

var url = "ws://" + window.location.host + window.location.pathname + "/ws";
var ws = new WebSocket(url);ws.onmessage = function (msg) {var line =  now() + " " + msg.data + "\n";chat.innerText += line;
};text.onkeydown = function (e) {if (e.keyCode === 13 && text.value !== "") {ws.send("<" + name + "> " + text.value);text.value = "";}
};

转载于:https://my.oschina.net/lemos/blog/912827

原生 javascript 操作 websocket相关推荐

原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
原生JAVASCRIPT操作cookie方法
在前端进行操作时,有的时候要传很多参数,这个时候,我们可以把这些参数拼接到url后面进行传值,那边在接收参数,不过这样挺麻烦的,如果把这些数据放到cookie里面,就开发者的开发效率来说,我想会高一些 ...
原生JavaScript+WebSocket+nodejs实现聊天室功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. WebSocket也是前端非常重要的技术栈. 现在各种网站.App.小程序都伴有即时通信的功能.WebSoc ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
WEB前端从原生JavaScript到MVVM
在了解MVVM之前,我们先回顾一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回顾历史,由于网上就可查不少资料,但都篇幅很长,晦涩难懂. 所以我引用了廖雪峰老师网站总结的一段话,言简意骇, ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
原生javascript添加和删除class
在操作class时,往往需要叠加或者删除一个class,这里用原生javascript写了一种方法,以供参考. 这里是html代码 <!DOCTYPE html PUBLIC "-// ...
前端框架这么火，还有必要学好原生 JavaScript 吗？
作为一名前端工程师,JavaScript 你一定每天都在用.但是,即便工作 5 年以上的前端也不一定用得非常熟,甚至很多前端对 JavaScript 的掌握程度仅仅停留在会用的层面. 而且 Vue/R ...

原生 javascript 操作 websocket

原生 javascript 操作 websocket相关推荐

最新文章

热门文章