WebSocket与即时通讯
HTTP 协议有一个缺陷：通信只能由客户端发起！HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室！
WebSocket 是一种网络通信协议，很多高级功能都需要它！它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。其他特定包括：
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 500px;
} .container {
height: 350px;
border: 1px solid #ccc;
overflow-y: auto;
} .container .tips {
text-align: center;
justify-content: center;
font-size: 12px;
color: #ccc;
} .container p:nth-child(1) {
display: flex;
justify-content: space-between;
} p span:nth-child(1) {
display: inline-block;
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} p span:nth-child(2) {
max-width: 240px;
background: limegreen;
color: #fff;
padding: 5px;
border-radius: 5px;
word-break: break-all;
margin-left: 10px;
} .container div {
display: flex;
justify-content: space-between;
} .send {
display: flex;
justify-content: space-between;
} .send input {
flex: 1;
height: 50px;
} ::-webkit-scrollbar {
display: none;
}
</style>
</head> <body>
<!--
如: 聊天室功能
在websocket之前,通过ajax轮询的方式实现 websocket: 双向实时通讯技术(服务器可以主动发送消息给,客户端可以主动发送消息给服务器) nodejs环境:
1.进入nodejs官网,安装nodejs: https://nodejs.org/en/download/
2.打开cmd, 输入: node -v 测试是否安装成功(出现版本号即安装成功,否则步骤3)
3.配置环境变量: 计算机--属性--高级系统配置--环境变量--Path--将nodejs安装目录添加到Path后面,用分号与前面的Path分开 启动服务器:
在命令行输入: node wsServer.js -->
<div id="box">
<div class="container"> </div>
<div class="send">
<input type="text" name="" id="" value="" />
<button type="button">发送消息</button>
</div>
</div> <script type="text/javascript">
var oBox = document.querySelector(".container");
var oVal = document.querySelector("input");
var oSend = document.querySelector("button"); // 1.创建连接()
var ws = new WebSocket("ws://8.135.39.102:8080"); // 2.连接已建立
ws.onopen = function () {
console.log("连接已建立");
} // 4.接收消息
ws.onmessage = function (ev) {
var newDiv = document.createElement("div");
if (ev.data.search("tips") != -1) {
newDiv.innerHTML = ev.data;
newDiv.className = "tips";
} else {
var data = JSON.parse(ev.data);
var time = new Date().toLocaleTimeString();
newDiv.innerHTML = `
<p>
<span>${data.nickname}</span>
<span>${data.msg}</span>
</p>
<p>${time}</p>
`
}
oBox.appendChild(newDiv);
oBox.scrollTop = oBox.scrollHeight;
} // 5.关闭连接
ws.onclose = function () {
console.log("连接已关闭");
} oSend.onclick = function () {
var val = oVal.value;
if (val) {
// 3.发送消息
ws.send(val);
oVal.value = "";
}
}
</script>
</body> </html>
WebSocket与即时通讯的更多相关文章
- Android WebSocket实现即时通讯功能
最近做这个功能,分享一下.即时通讯(Instant Messaging)最重要的毫无疑问就是即时,不能有明显的延迟,要实现IM的功能其实并不难,目前有很多第三方,比如极光的JMessage,都比较容易 ...
- Websocket实现即时通讯
前言 关于我和WebSocket的缘:我从大二在计算机网络课上听老师讲过之后,第一次使用就到了毕业之后的第一份工作.直到最近换了工作,到了一家是含有IM社交聊天功能的app的时候,我觉得我现在可以谈谈 ...
- JavaEE7 HTML5利用WebSocket实现即时通讯
HTML5给Web浏览器带来了全双工TCP连接websocket标准服务器的能力. 换句话说,浏览器能够与服务器建立连接,通过已建立的通信信道来发送和接收数据而不需要由HTTP协议引入额外其他的开销来 ...
- Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- 使用 HTML5 webSocket API实现即时通讯的功能
project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSock ...
- websocket做手机页面聊天与PC页面聊天一对一的即时通讯
当时要写这个需求的时候,很头痛,手机端页面的客服功能,相当于QQ这样一个一对一聊天室功能了,瞬间蒙蔽的我也不知道用什么去写这个东西,一开始用ajax,定时器去写,写着写着发现这尼玛不在同一个页面怎么做 ...
- java Activiti6 工作流引擎 websocket 即时聊天 SSM源码 支持手机即时通讯聊天
即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...
- java ssm 后台框架平台 项目源码 websocket 即时通讯 IM quartz springmvc
官网 http://www.fhadmin.org/D 集成安全权限框架shiro Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠E ...
- [开源] .NETCore websocket 即时通讯组件---ImCore
前言 ImCore 是一款 .NETCore 下利用 WebSocket 实现的简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. 开源地址:https:// ...
随机推荐
- SpringBoot简单整合redis
Jedis和Lettuce Lettuce 和 Jedis 的定位都是Redis的client,所以他们当然可以直接连接redis server. Jedis在实现上是直接连接的redis serve ...
- 国产网络测试仪MiniSMB - 如何3秒内创建出16,000条UDP/TCP端口号递增流
国产网络测试仪MiniSMB(www.minismb.com)是复刻smartbits的IP网络性能测试工具,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太 ...
- spring再学习之注解
1.使用注解配置spring <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi= ...
- Linux系统诊断必备技能之三：查看信息系统常用命令
一.概述 Linux操作系统的学习中,CLI下进行操作,需要掌握大量命令,Linux的命令有很多,对于命令的学习大家记住只能是熟能生巧,所以现在把日常使用命令为大家罗列一部分,仅供参考. 二.常用命令 ...
- leetcode 36 有效的数独 哈希表 unordered_set unordersd_map 保存状态 leetcode 37 解数独
leetcode 36 感觉就是遍历. 保存好状态,就是各行各列还有各分区divide的情况 用数组做. 空间小时间大 class Solution { public: bool isValidSud ...
- 重新上手c语言的一些坑
c语言结构体不能声明函数,放几个函数指针倒是没问题 c语言结构体不能在声明时初始化 声明两个指针 int *a,*b; 或者typedef int* int_P int_P a,b; typedef要 ...
- μC/OS-III---I笔记11---就绪任务列表管理
就绪优先级为映像响表 在UCOSIII内,任务调度是要先找到优先级最高的任务,然后执行.理论上对于UCOSIII可以有无数个优先级,每个优先级又可以有无数个任务但是对于这么多的任务如何快速查到到当先就 ...
- HHVM的全称是"HipHop for PHP"，开放源代码。采用PHP许可证授权！
http://hhvm.com/ https://github.com/xgqfrms/hhvm 什么是HHVM高性能服务器? HHVM是由Facebook公司出品的高性能开源服务器,用来执行hack ...
- short URL 短网址实现原理剖析
short URL 短网址实现原理剖析 意义,简短便于分享,避免出现超长 URL 的字符长度限制问题 原理分析, 使用 HashMap 存储对应的映射关系 (长度不超过7的字符串,由大小写字母加数字共 ...
- How to Use RSS on Your Website
RSS feed 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...