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:// ...
随机推荐
- 5.PowerShell DSC核心概念之资源
什么是资源? 资源为 DSC 配置提供构建基块. 资源公开可配置的属性,并包含本地配置管理器 (LCM) 调用以"使其如此"的 PowerShell 脚本函数. 系统内置资源 可在 ...
- 力扣992.K个不同整数的子数组-C语言实现
题目 原题链接 给定一个正整数数组 A,如果 A 的某个子数组中不同整数的个数恰好为 K,则称 A 的这个连续.不一定独立的子数组为好子数组. (例如,[1,2,3,1,2] 中有 3 个不同的整数: ...
- OpenStack Train版-4.安装placement放置服务
安装placement放置服务 创建placement数据库 mysql -uroot CREATE DATABASE placement; GRANT ALL PRIVILEGES ON place ...
- HBuilderX All In One
HBuilderX All In One uni-app https://uniapp.dcloud.io/quickstart-hx 目录结构 一个uni-app工程,默认包含如下目录及文件: $ ...
- How to enable a local HTTPS website in macOS
How to enable a local HTTPS website in macOS local SSL certificate http://loclahost:8888 https://loc ...
- GitHub Classroom
GitHub Classroom GitHub Education https://classroom.github.com/classrooms https://classroom.github.c ...
- Nestjs mongodb
nestjs 文档 mongoose 文档 使用"@meanie/mongoose-to-json"转换查询后返回的json数据 将"_id"转为"i ...
- 创建gitHub账户并配置秘钥
1. 登录注册地址 https://github.com/ 2.点击注册 Sign up 3.输入邮箱 密码 进行注册 4.注册成功后,登录邮箱验证 .然后通过邮箱和密码登录gitHub.设置 set ...
- Fast-RTPS简介
RTPS即DDS中的主要核心通信部分.它提供实时高效的去中心化publish/subscribe通信机制.是ROS-2的核心底层通信组件,也是未来机器人/无人驾驶领域一个必然的方向. 资料参考: ht ...
- 图片居中的flex实现
文本居中 text-align:center; 如果是图片放在div中,就没办法了.用flex可以很简单实现. display: flex; justify-content: center; /* 图 ...