IM & WebSockets
IM & WebSockets
WebSocket API
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket




// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});
node.js & websokets
server
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description WS
* @augments
* @example
*
*/
// const WSGenerator = (datas = [], debug = false) => {
// let result = ``;
// // do something...
// return result;
// };
// export default WS;
// export {
// WS,
// };
const WebSocket = require('ws');
const wss = new WebSocket.Server({
// host: "",
// path: "",
port: 8888
});
let counter = 1;
wss.on('connection', function (ws, req) {
console.log("client connected", counter);
counter ++;
ws.on("message", function (msg) {
console.log(`receive message = `, msg);
if (ws.readyState === 1) {
const json = {
"success": true,
"message": null,
"data": [
{
"pro_name": "otc",
"pro_instructions": null,
"pro_type_name": "front-end",
"send_time": null,
"incre": true,
},
{
"pro_name": "ds",
"pro_instructions": null,
"pro_type_name": "back-end",
"send_time": null,
"incre": false
}
]
};
// const json = {
// success: true,
// message: "success",
// data: []
// };
let datas = JSON.stringify(json);
// return json datas;
ws.send(datas);
// ws.send("server returned message!");
}
});
let ip = req.connection.remoteAddress;
console.log(`ip =`, ip);
});
client
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description WS
* @augments
* @example
*
*/
// const WS = (datas = [], debug = false) => {
// let result = ``;
// // do something...
// return result;
// };
// export default WS;
// export {
// WS,
// };
const url = `ws://10.1.64.138:8888/F10_APP/src/test`;
let ws = new WebSocket(url);
ws.onopen = function(e) {
console.log(`已经建立连接 open`, ws.readyState);
console.log(`e = `, e);
};
ws.onerror = function(e) {
console.log(`连接异常 error`, ws.readyState);
console.log(`e = `, e);
};
ws.onmessage = function(res) {
console.log(`收到消息 message`, ws.readyState);
let data = res.data,
origin = res.origin;
console.log(`res & e = `, res);
console.log(`res.data = `, res.data);
console.log(`res.origin = `, res.origin);
};
ws.onclose = function(e) {
console.log(`已经关闭连接 close`, ws.readyState);
console.log(`e = `, e);
};
setTimeout(() => {
ws.onopen = function(e) {
console.log(`已经建立连接 open`, ws.readyState);
console.log(`e = `, e);
};
}, 1000 * 1);
ws client
new version
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description WS client
* @augments
* @example
* @link
*
*/
const url = `ws://192.168.1.36:8888/`;
let ws = new WebSocket(url);
let log = console.log;
ws.onopen = function(e) {
log(`已经建立连接 open`, ws.readyState);
log(`e = `, e);
};
ws.onerror = function(e) {
log(`连接异常 error`, ws.readyState);
log(`e = `, e);
};
ws.onmessage = function(res) {
log(`收到消息 message`, ws.readyState);
let data = res.data;
let origin = res.origin;
log(`res & e = `, res);
log(`res.data = `, JSON.stringify(data, null, 4));
log(`res.origin = `, origin);
};
ws.onclose = function(e) {
log(`已经关闭连接 close`, ws.readyState);
log(`e = `, e);
};
setTimeout(() => {
ws.onopen = function(e) {
log(`已经建立连接 open`, ws.readyState);
log(`e = `, e);
};
}, 1000 * 1);
// setTimeout(() => {
// ws.send(`hello server!`);
// }, 3000);
let flag = setInterval(() => {
ws.send(`hello server!`);
}, 3000);
setTimeout(() => {
clearInterval(flag);
}, 60 * 1000);
websocket & readyState
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState

refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
IM & WebSockets的更多相关文章
- html5 Websockets development guidance
1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...
- 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)
工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...
- HTML5之 WebSockets
------- 新的网络连接技术 - Web-Sockets 持续连接数据流 全双工工作方式 http补充品而非替代品 - 应用场景 聊天室 股票显示 在线游戏(尤为突出) - 2byte的通信 1b ...
- Ratchet(WebSockets for PHP)的官方TUTORIALS 的实践
前几天稍微看了一下Ratchet,并且实践了一下它官方例子.所以现在就将实践的过程记录下来. 在具体实践之前先将Ratchet是什么东东,要先说明一下.以下的英文是从官方copy过来的 Ratchet ...
- Why SignalR does not use WebSockets?
Why SignalR does not use WebSockets? As you probably know SignalR supports multiple transports. Th ...
- SSE && WebSockets
SSE && WebSockets 参考 http://www.bitscn.com/school/HTMLCSS/201402/194940.html WebSockets 定义了一 ...
- iOS开展-clang: error: unknown argument: '-websockets'解决方案
问题: 昨天莫名其妙Xcode自己主动升级,那么今天之前执行project什么时候,不知怎的,他们都获得了. 错误内容: clang: error: unknown argument: '-webso ...
- HTML5分析实战WebSockets基本介绍
HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...
- HTML5分析实战WebSockets一个简短的引论
HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...
- Long-Polling, Websockets, SSE(Server-Sent Event), WebRTC 之间的区别
在下面的示例中,客户端指的是浏览器,服务器指的是网站服务器主机. 为了更好的理解这些知识点,你应该简单了解典型的http网站是如何工作的. 普通的http: 客户端从服务器端请求网页 服务器作出相应的 ...
随机推荐
- 丢包 ICMP
小结: 1.ICMP 常见网络丢包故障分析及处理 云极安 云极安 2019-12-25 我们在管理维护网络的过程中经常会遇到数据包丢失的现象.使用Ping命令进行连通性测试,则会发现Ping包延时远远 ...
- JAXB学习(一):概述
pre.XML { background-color: rgba(255, 204, 204, 1); padding-left: 25px } JAXB是 Java Architecture for ...
- 理解前端模块概念:CommonJs与ES6Module
前言 现代前端开发每时每刻都和模块打交道.例如,在项目中引入一个插件,或者实现一个供全局使用组件的JS文件.这些都可以称为模块. 在设计程序结构时,不可能把所有代码都放在一起.更为友好的组织方式时按照 ...
- 【算法】ST表
想学习一下LCA倍增,先 水一个黄题 学一下ST表 ST表 介绍: 这是一个运用倍增思想,通过动态规划来计算区间最值的算法 算法步骤: 求出区间最值 回答询问 求出区间最值: 用f[i][j]来存储从 ...
- FLOYD判圈
转载一篇博客:http://blog.csdn.net/javasus/article/details/50015687 Floyd判圈算法(Floyd Cycle Detection Algorit ...
- 在 ASP.NET Core 应用中使用 Cookie 进行身份认证
Overview 身份认证是网站最基本的功能,最近因为业务部门的一个需求,需要对一个已经存在很久的小工具网站进行改造,因为在逐步的将一些离散的系统迁移至 .NET Core,所以趁这个机会将这个老的 ...
- Web漏洞扫描-AWVS
Web漏洞扫描-AWVS 一.AWVS概述 二.功能以及特点 三.AWVS界面 四.AWVS使用 相关优质博文: CSDN:帽子不够白:WEB渗透测试之三大漏扫神器 一.AWVS概述 Acunetix ...
- Java——继承,重载,重写三剑客
About-继承 所有Java的类均是由java.lang.Object类继承而来的,所以Object是所有类的祖先类,而除了Object外,所有类必须有一个父类. 继承可以理解为一个对象从另一个对象 ...
- ACCESS手注
ASP一般搭载ACCESS或者mssql 判断数据库类型 http://www.***.com?id=1 and (select count(*) from sysobjects)>0 http ...
- 为何 JVM TLAB 在线程退还给堆的时候需要填充 dummy object
TLAB 全网最硬核的解析,请参考:全网最硬核 JVM TLAB 分析 TLAB 在何时退还给堆? 有两种情况: 当前 TLAB 不足分配,并且剩余空间小于当前线程最大浪费空间限制时. 发生 GC 时 ...