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: 客户端从服务器端请求网页 服务器作出相应的 ...
随机推荐
- python_3 装饰器参数之谜
装饰器参数之谜 之前已经初步了解过装饰器了,知道了装饰器可以"偷梁换柱",在不改变函数的调用方式和函数内容的时候,而把函数的功能偷偷地修改. 那么问题来了,如果被修改的函数中有参数 ...
- nginx proxy pass redirects ignore port
nginx proxy pass redirects ignore port $host in this order of precedence: host name from the request ...
- windows命令行关闭IE代理
打开:reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings" /v ProxyEnab ...
- centos7+python3+selenium+chrome
一.安装GUI图形化界面 (1)安装GUI图形化界面 yum groupinstall "GNOME Desktop" "Graphical Administration ...
- valgrind和Kcachegrind性能分析工具详解
一.valgrind介绍 valgrind是运行在Linux上的一套基于仿真技术的程序调试和分析工具,用于构建动态分析工具的装备性框架.它包括一个工具集,每个工具执行某种类型的调试.分析或类似的任务, ...
- Spring MVC——基础(简介,使用,地址映射)
Spring MVC简介 重点Spring MVC的处理流程 Spring MVC特点 Spring MVC的使用 将相应的JAR包导入lib文件下 配置相关webxml 配置servlet-mvcx ...
- 使用Docker Compose编排Spring Cloud微服务
文章目录 微服务构建实例 简化Compose的编写 编排高可用的Eureka Server 编排高可用Spring Cloud微服务集群及动态伸缩 微服务项目名称 项目微服务中的角色 microser ...
- java解压zip压缩包
package com.spring.mvc.zip; import java.io.File;import java.io.FileOutputStream;import java.io.Input ...
- ceph --- (简单操作及openstack交接)
部署ceph :https://www.cnblogs.com/cloudhere/p/10519647.html Centos7部署ceph:https://www.cnblogs.com/kevi ...
- IntelliJ IDEA 内置数据库管理工具实战
1. 写在前面 开发Java应用程序,作为明星工具IntelliJ IDEA Ultimate当然是首选,然后进行数据库SQL开发的时候,常常会选择诸如:Navicat , sqlyog, MySQL ...