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:// ...
随机推荐
- Linux网络文件下载
wget 以网络下载 maven 包为例 wget -c http://mirrors.shu.edu.cn/apache/maven/maven-3/3.5.4/binaries/apache-ma ...
- Kubernets二进制安装(8)之部署四层反向代理
四层反向代理集群规划 主机名 角色 IP地址 mfyxw10.mfyxw.com 4层负载均衡(主) 192.168.80.10 mfyxw20.mfyxw.com 4层负载均衡(从) 192.168 ...
- Python——Django框架——邮件
#引用EMAIL服务 EMAIL_BACKEND = 'django.cpre.mail.backends.smtp.EmailBackend' #EMAIL发送服务器 EMAIL_HOST = 's ...
- 操作系统 part3
1.操作系统四特性 并发:一个时间段,多个进程在宏观上同时运行 共享:系统中的资源可以被多个并发进程共同使用(互斥共享,同时共享) 虚拟:利用多道程序设计,利用时分复用(分时系统)和空分复用(虚拟内存 ...
- js sort tricks All In One
js sort tricks All In One js 排序技巧 const arr = [ { label: 'False 1 ', disabled: false, }, { label: 'F ...
- docker-compose All In One
docker-compose All In One docker-compose 多容器应用 $ docker-compose -h Define and run multi-container ap ...
- angular-2-tutorial-2017
# angular-2-tutorial-2017https://www.sitepoint.com/understanding-component-architecture-angular/http ...
- LeetCode 算法题解 js 版 (001 Two Sum)
LeetCode 算法题解 js 版 (001 Two Sum) 两数之和 https://leetcode.com/problems/two-sum/submissions/ https://lee ...
- js 实现前端路由的方法
js 实现前端路由的方法 前端路由原理 History API https://developer.mozilla.org/en-US/docs/Web/API/History_API https:/ ...
- 一文搞懂 js 中的各种 for 循环的不同之处
一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...