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: 客户端从服务器端请求网页 服务器作出相应的 ...
随机推荐
- http发送
package cn.com.yitong.wdph.util; import java.io.BufferedReader;import java.io.InputStream;import jav ...
- 并发安全 sync.Map
https://mp.weixin.qq.com/s/MqPm7QH3_D9roVkpTs9Xpw 谈谈Go的并发安全相关 原创 歪鼻子 歪鼻子 2020-12-27 package main ...
- WPF Selector、SelectIndex、SelectedValue、SelectedValuePath、SelectedItem这几兄弟你分的清楚嘛?
Selector Selector是一个抽象类,继承ItemsControl类(包含任何类型的对象(例如字符串,图像或面板)的集合),而本文的4个兄弟都是Selector类下的4个属性. Select ...
- docker基本使用-常用命令
一. 常用命令 #查看docker服务 docker ps #启动docker服务 systemctl start docker #查看本地镜像 docker images #删除本地镜像 docke ...
- 《我想进大厂》之Zookeeper夺命连环9问
谈谈你对Zookeeper的理解? Zookeeper是一个开源的分布式协调服务,由雅虎公司创建,由于最初雅虎公司的内部研究小组的项目大多以动物的名字命名,所以后来就以Zookeeper(动物管理员) ...
- java架构《并发线程高级篇四》
本章主要讲并发线程的常见的两种锁.重入锁和读写锁 一:重入锁(ReentrantLock) 概念:重入锁,在需要进行同步的代码加锁,但最后一定不要忘记释放锁,否则会造成锁永远不能释放,其他线程进不了 ...
- Ajax(简介、基础操作、计算器,登录验证)
Ajax简介 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. ...
- Kubernetes --(k8s) service
service Kubernete Service 是一个定义了一组Pod的策略的抽象,我们也有时候叫做宏观服务.这些被服务标记的Pod都是(一般)通过label Selector决定的 对于Kube ...
- Apache-三种工作模式(prefork/ worker/Event)
Apache-两种工作模式(prefork/ worker/Event) Apache 2.X 支持插入式并行处理模块,称为多进程处理模块(MPM).在编译apache时必须选择也只能选择一个MPM ...
- UML实战总结——机房收费系统UML第一版部分图展
距离机房收费系统已经过去了近2个月之久,如今的UML图才出来,从软件开发设计的逻辑上来讲这是顺序有问题的,不过,对于我们而言,而且是初次用面向对象的思想去设计和建模,就当是UML的一个实战练手的项目吧 ...