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. python_3 装饰器参数之谜

    装饰器参数之谜 之前已经初步了解过装饰器了,知道了装饰器可以"偷梁换柱",在不改变函数的调用方式和函数内容的时候,而把函数的功能偷偷地修改. 那么问题来了,如果被修改的函数中有参数 ...

  2. nginx proxy pass redirects ignore port

    nginx proxy pass redirects ignore port $host in this order of precedence: host name from the request ...

  3. windows命令行关闭IE代理

    打开:reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings" /v ProxyEnab ...

  4. centos7+python3+selenium+chrome

    一.安装GUI图形化界面 (1)安装GUI图形化界面 yum groupinstall "GNOME Desktop" "Graphical Administration ...

  5. valgrind和Kcachegrind性能分析工具详解

    一.valgrind介绍 valgrind是运行在Linux上的一套基于仿真技术的程序调试和分析工具,用于构建动态分析工具的装备性框架.它包括一个工具集,每个工具执行某种类型的调试.分析或类似的任务, ...

  6. Spring MVC——基础(简介,使用,地址映射)

    Spring MVC简介 重点Spring MVC的处理流程 Spring MVC特点 Spring MVC的使用 将相应的JAR包导入lib文件下 配置相关webxml 配置servlet-mvcx ...

  7. 使用Docker Compose编排Spring Cloud微服务

    文章目录 微服务构建实例 简化Compose的编写 编排高可用的Eureka Server 编排高可用Spring Cloud微服务集群及动态伸缩 微服务项目名称 项目微服务中的角色 microser ...

  8. java解压zip压缩包

    package com.spring.mvc.zip; import java.io.File;import java.io.FileOutputStream;import java.io.Input ...

  9. ceph --- (简单操作及openstack交接)

    部署ceph :https://www.cnblogs.com/cloudhere/p/10519647.html Centos7部署ceph:https://www.cnblogs.com/kevi ...

  10. IntelliJ IDEA 内置数据库管理工具实战

    1. 写在前面 开发Java应用程序,作为明星工具IntelliJ IDEA Ultimate当然是首选,然后进行数据库SQL开发的时候,常常会选择诸如:Navicat , sqlyog, MySQL ...