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. http发送

    package cn.com.yitong.wdph.util; import java.io.BufferedReader;import java.io.InputStream;import jav ...

  2. 并发安全 sync.Map

    https://mp.weixin.qq.com/s/MqPm7QH3_D9roVkpTs9Xpw 谈谈Go的并发安全相关 原创 歪鼻子 歪鼻子 2020-12-27     package main ...

  3. WPF Selector、SelectIndex、SelectedValue、SelectedValuePath、SelectedItem这几兄弟你分的清楚嘛?

    Selector Selector是一个抽象类,继承ItemsControl类(包含任何类型的对象(例如字符串,图像或面板)的集合),而本文的4个兄弟都是Selector类下的4个属性. Select ...

  4. docker基本使用-常用命令

    一. 常用命令 #查看docker服务 docker ps #启动docker服务 systemctl start docker #查看本地镜像 docker images #删除本地镜像 docke ...

  5. 《我想进大厂》之Zookeeper夺命连环9问

    谈谈你对Zookeeper的理解? Zookeeper是一个开源的分布式协调服务,由雅虎公司创建,由于最初雅虎公司的内部研究小组的项目大多以动物的名字命名,所以后来就以Zookeeper(动物管理员) ...

  6. java架构《并发线程高级篇四》

    本章主要讲并发线程的常见的两种锁.重入锁和读写锁 一:重入锁(ReentrantLock) 概念:重入锁,在需要进行同步的代码加锁,但最后一定不要忘记释放锁,否则会造成锁永远不能释放,其他线程进不了 ...

  7. Ajax(简介、基础操作、计算器,登录验证)

    Ajax简介 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. ...

  8. Kubernetes --(k8s) service

    service Kubernete Service 是一个定义了一组Pod的策略的抽象,我们也有时候叫做宏观服务.这些被服务标记的Pod都是(一般)通过label Selector决定的 对于Kube ...

  9. Apache-三种工作模式(prefork/ worker/Event)

    Apache-两种工作模式(prefork/ worker/Event) Apache 2.X  支持插入式并行处理模块,称为多进程处理模块(MPM).在编译apache时必须选择也只能选择一个MPM ...

  10. UML实战总结——机房收费系统UML第一版部分图展

    距离机房收费系统已经过去了近2个月之久,如今的UML图才出来,从软件开发设计的逻辑上来讲这是顺序有问题的,不过,对于我们而言,而且是初次用面向对象的思想去设计和建模,就当是UML的一个实战练手的项目吧 ...