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:// ...
随机推荐
- CF1474-A. Puzzle From the Future
CF1474-A. Puzzle From the Future 题意: 有两个由\(0,1\)组成的.长度相等字符串\(a, b\),两个字符串按位相加得到一个新的字符串\(s\),对\(s\)取\ ...
- springboot（五）Scheduling demo
在项目开发过程中,经常会使用到定时任务(跑批),springboot默认已经实现了,只需要添加相应的注解就可以实现 在启动类上加入注解,开启定时任务 @SpringBootApplication @E ...
- 2020 Google 开发者大会
2020 Google 开发者大会 Google Developer Summit https://developersummit.googlecnapps.cn/ Flutter | Web | M ...
- 如何用 js 实现一个 apply 函数
如何用 js 实现一个 apply 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ...
- bash for mac
bash for mac https://sourabhbajaj.com/mac-setup/iTerm/ https://sourabhbajaj.com/mac-setup/iTerm/zsh. ...
- GitHub & Hacker & MicroSoft
GitHub & Hacker & MicroSoft GitHub源码被黑客洗劫和勒索事件 微软也未能幸免 https://www.cnbeta.com/articles/tech/ ...
- flex & flex-wrap
flex & flex-wrap https://css-tricks.com/almanac/properties/f/flex-wrap/ https://developer.mozill ...
- Linux & bash & tcpdump
Linux & bash & tcpdump Linux & tcpdump https://www.tecmint.com/12-tcpdump-commands-a-net ...
- push notifications
push notifications https://developers.google.com/web/fundamentals/push-notifications/ Push API https ...
- js add Struct to ArrayBuffer
使用struct-buffer为ArrayBuffer添加结构体 $ npm i struct-buffer 1. 创建结构体 import { DWORD, string_t, StructBuff ...