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的更多相关文章

  1. html5 Websockets development guidance

    1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...

  2. 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)

    工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...

  3. HTML5之 WebSockets

    ------- 新的网络连接技术 - Web-Sockets 持续连接数据流 全双工工作方式 http补充品而非替代品 - 应用场景 聊天室 股票显示 在线游戏(尤为突出) - 2byte的通信 1b ...

  4. Ratchet(WebSockets for PHP)的官方TUTORIALS 的实践

    前几天稍微看了一下Ratchet,并且实践了一下它官方例子.所以现在就将实践的过程记录下来. 在具体实践之前先将Ratchet是什么东东,要先说明一下.以下的英文是从官方copy过来的 Ratchet ...

  5. Why SignalR does not use WebSockets?

    Why SignalR does not use WebSockets?   As you probably know SignalR supports multiple transports. Th ...

  6. SSE && WebSockets

    SSE && WebSockets 参考 http://www.bitscn.com/school/HTMLCSS/201402/194940.html WebSockets 定义了一 ...

  7. iOS开展-clang: error: unknown argument: '-websockets'解决方案

    问题: 昨天莫名其妙Xcode自己主动升级,那么今天之前执行project什么时候,不知怎的,他们都获得了. 错误内容: clang: error: unknown argument: '-webso ...

  8. HTML5分析实战WebSockets基本介绍

    HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...

  9. HTML5分析实战WebSockets一个简短的引论

    HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...

  10. Long-Polling, Websockets, SSE(Server-Sent Event), WebRTC 之间的区别

    在下面的示例中,客户端指的是浏览器,服务器指的是网站服务器主机. 为了更好的理解这些知识点,你应该简单了解典型的http网站是如何工作的. 普通的http: 客户端从服务器端请求网页 服务器作出相应的 ...

随机推荐

  1. Ubuntu16 安装 OpenSSH-Server

    Ubuntu16.04 桌面版默认是没有安装 SSH 服务的,需要手动安装服务: 更新源:sudo apt-get update 安装服务:sudo apt-get install -y openss ...

  2. 五种C语言非数值计算的常用经典排序算法

    摘要:排序是计算机的一种操作方法,其目的是将一组"无序"的记录序列调整为"有序"的记录序列,主要分为内部排序和外部排序. 排序 排序是计算机的一种操作方法,其目 ...

  3. SpringMVC听课笔记(九:数据转换 & 数据格式化 & 数据校验)

    1.数据绑定流程 --1). Spring MVC主框架将ServletRequest对象及目标方法入参实例传递给WebDataBinderFactory实例,以创建DataBinder实例对象. - ...

  4. Docker监控平台prometheus和grafana,监控redis,mysql,docker,服务器信息

    Docker监控平台prometheus和grafana,监控redis,mysql,docker,服务器信息 一.通过redis_exporter监控redis 1.1 下载镜像 1.2 运行服务 ...

  5. Java中的fail-fast和 fail-safe 的区别

    在我们详细讨论这两种机制的区别之前,首先得先了解并发修改. 1.什么是同步修改? 当一个或多个线程正在遍历一个集合Collection,此时另一个线程修改了这个集合的内容(添加,删除或者修改).这就是 ...

  6. 用powershell实现,管理github自动化

     用powershell实现,管理github自动化 搜索关键字如下:PowerShellForGitHub powershell 传教士 原创文章.始于 2021-02-04 允许转载,但必须保留名 ...

  7. shell脚本的使用该熟练起来了,你说呢?(篇三)

    继续前一篇的文章: shell脚本的使用该熟练起来了,你说呢?(篇一) shell脚本的使用该熟练起来了,你说呢?(篇二) 文章里面测试的命令脚本文件,大家关注我公众号后,可以私信我领取文件. 作者: ...

  8. 2019牛客暑期多校训练营(第五场)I.three points 1(暴力几何)

    题意:现在给你一个矩形边框 一个三角形的三边长 现在问你能否把三角形放入矩阵边框中 并且输出三个点的坐标 思路:我们可以发现如果一定有解 我们就可以让一个点在左下角(0,0)处 还有一个点在矩形边上 ...

  9. HDU6311 Cover【欧拉路径 | 回路】

    HDU6311 Cover 题意: 给出\(N\)个点的简单无向图,不一定联通,现在要用最少的路径去覆盖所有边,并且每条边只被覆盖一次,问最少路径覆盖数和各条路径 \(N\le 10^5\) 题解: ...

  10. Codeforces Round #649 (Div. 2) C. Ehab and Prefix MEXs

    题目链接:https://codeforces.com/contest/1364/problem/C 题意 给出大小为 $n$ 的非递减数组 $a$,构造同样大小的数组 $b$,使得对于每个 $i$, ...