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. physical CPU vs logical CPU vs Core vs Thread vs Socket(翻译)

    原文地址: http://www.daniloaz.com/en/differences-between-physical-cpu-vs-logical-cpu-vs-core-vs-thread-v ...

  2. libco hook原理简析

    我们先看一下libco协程库的特性描述 libco的特性 无需侵入业务逻辑,把多进程.多线程服务改造成协程服务,并发能力得到百倍提升; 支持CGI框架,轻松构建web服务(New); 支持gethos ...

  3. 关于MongoDB的简单理解(三)--Spring Boot篇

    一.前言 Spring Boot集成MongoDB非常简单,主要为加依赖,加配置,编码. 二.说明 环境说明: JDK版本为15(1.8+即可) Spring Boot 2.4.1 三.集成步骤 3. ...

  4. Centos搭建Hive

    Centos搭建Hive 一.Hive简介 二.安装Hive 2.1hive下载 2.2上传解压 2.3配置hive相关的环境变量 三.Mysql 3.1安装mysql connector 3.2 将 ...

  5. 遇到的一个bug

    /// <summary> /// 检测玩家是否在机器人的球形碰撞体内,这个碰撞体是机器人的侦测范围,玩家在内部会进行视野检测和声音检测 /// </summary> priv ...

  6. python工业互联网应用实战5—Django Admin 编辑界面和操作

    1.1. 编辑界面 默认任务的编辑界面,对于model属性包含"choices"会自动显示下来列表供选择,"datetime"数据类型也默认提供时间选择组件,如 ...

  7. 从NMEA0183到GNSS定位数据获取(一)原理篇

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述 GPS我们都知道,一种用来全球定位的系统,后来俄罗斯推出了格洛纳斯定位系统,中国推出了北斗定位,欧盟有 ...

  8. 黑客整人代码,vbS整人代码大全(强制自动关机、打开无数计算器、无限循环等)

    vbe与vbs整人代码大全,包括强制自动关机.打开无数计算器.无限循环等vbs整人代码,感兴趣的朋友参考下.vbe与vbs整人代码例子:set s=createobject("wscript ...

  9. ogn1.MethodFailedException:Method "xxx" failed for object xxx

    问题描述:初学ssh写了个小项目,访问界面出现以下错误 java. lang. NoSuchllethodError: org. hi bernate. SessionF actory. openSe ...

  10. for循环语句学习

    for循环又称为遍历循环,从名字就可以知道,它用于对象的遍历 语法格式: 会从可迭代对象对象中依次拿出值来赋值给变量,变量的值每次都会被修改 for 变量1[变量2...] in 可迭代对象: 代码块 ...