WebSocket使用案例

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocketAPI 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议

1. WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

2. WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

3. WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

2. nodejs服务器端websocket

Nodejs教程：添加链接描述
简单的说 Node.js 就是运行在服务端的 JavaScript。
服务器端使用websocket需要安装nodejswebsocket

cd 工程目录
# 此刻我们需要执行命令：
sudo npm init
#创建package.json文件，系统会提示相关配置，也可以使用命令：
sudo npm init ‐y
sudo npm install nodejs‐websocket

官方参考：https://www.npmjs.com/package/nodejswebsocket
我们只要关注：
（1）如何创建websocket服务器，通过createServer和listen接口；
（2）如何判断有新的连接进来，createServer的回调函数判断；
（3）如何判断关闭事件，通过on(“close”, callback) 事件的回调函数；
（4）如何判断接收到数据，通过on(“text”, callkback)事件的回调函数；
（5）如何判断接收异常，通过on(“error”, callkback)事件的回调函数；
（6）如何主动发送数据，调用sendText
代码示例：

var ws = require("nodejs‐websocket")
// Scream server example: "hi" ‐> "HI!!!"
var server = ws.createServer(function (conn) {console.log("New connection")conn.on("text", function (str) { // 收到数据的响应console.log("Received " + str)conn.sendText(str.toUpperCase() + "!!!") // 发送})conn.on("close", function (code, reason) { // 关闭时的响应console.log("Connection closed")})conn.on("error", function (err) { // 出错console.log("error:" + err);});
}).listen(8001)

3. websocket案例

消息类型分为三种：
1. enter：新人进入（蓝色字体显示）
2. message：普通聊天信息（黑色字体显示）
3. leave：有人离开（红色字体显示）
服务器在收到某个客户端的消息（message+enter+leave），然后将其广播给所有的客户端（包括发送者）。

1. 客户端代码

<html>
<head><meta charset="UTF-8"><title>webrtc demo</title>
</head><body><h1>Websocket简易聊天</h1><div id="app"><input id="sendMsg" type="text" /><button id="submitBtn">发送</button></div>
</body>
<script type="text/javascript">//在页面显示聊天内容function showMessage(str, type) {var div = document.createElement("div");div.innerHTML = str;if (type == "enter") {div.style.color = "blue";} else if (type == "leave") {div.style.color = "red";}document.body.appendChild(div);}//新建一个websocketvar websocket = new WebSocket("ws://127.0.0.1:8099");//打开websocket连接websocket.onopen = function () {console.log("已经连上服务器----");document.getElementById("submitBtn").onclick = function () {var txt = document.getElementById("sendMsg").value;if (txt) {//向服务器发送数据websocket.send(txt);}};};//关闭连接websocket.onclose = function () {console.log("websocket close");};//接收服务器返回的数据websocket.onmessage = function (e) {var mes = JSON.parse(e.data);   // json格式showMessage(mes.data, mes.type);};
</script></html>

2. 服务端代码

var ws = require("nodejs-websocket")
var port = 8099;
var user = 0;// 创建一个连接
var server = ws.createServer(function (conn) {console.log("创建一个新的连接--------");user++;conn.nickname="user" + user;conn.fd="user" + user;var mes = {};mes.type = "enter";mes.data = conn.nickname + " 进来啦"broadcast(JSON.stringify(mes));//向客户端推送消息conn.on("text", function (str) {console.log("回复 "+str)mes.type = "message";mes.data = conn.nickname + " 说:    " + str;broadcast(JSON.stringify(mes));});//监听关闭连接操作conn.on("close", function (code, reason) {console.log("关闭连接");mes.type = "leave";mes.data = conn.nickname+" 离开了"broadcast(JSON.stringify(mes));});//错误处理conn.on("error", function (err) {console.log("监听到错误");console.log(err);});
}).listen(port);function broadcast(str){server.connections.forEach(function(connection){connection.sendText(str);})
}

3. 效果展示

4. websocket部署在阿里云连接不上？

测试时，将服务端代码部署在阿里云，发送访问不通，需要配置网络端口，弄了好久才发现…

WebSocket使用案例相关推荐

golang gin框架gorilla的websocket小案例
golang gin框架中gorilla的websocket案例在gin框架下导入包 "github.com/gorilla/websocket" r.GET("/t ...
netty案例，netty4.1中级拓展篇五《基于Netty搭建WebSocket，模仿微信聊天页面》
前言介绍本章节我们模仿微信聊天页面,开发一个基于Netty搭建WebSocket通信案例.Netty的应用方面非常广:聊天.MQ.RPC.数据等等,在5G到来的时候更加需要大量数据传输,Netty的 ...
socket/WebSocket/WebService/http/https概念
学习了这么久的java技术, 但是这5个 socket/WebSocket/WebService/http/https 概念还不是很清楚, 总是很模糊,或者是弄混. 惭愧! ! 学习之前, 要对这个 ...
Swoole基础知识，安装，websocket应用及各种问题详解
1. swoole基础-概述 Swoole基础课程正式推出!零基础开始,让你循环渐进的掌握swoole. 传统的phper们大部分都是用于开发web应用程序,并且大部分都是在用类似yii\larave ...
Nodejs+webSocket搭建多人聊天室
NodeJs+webSocket搭建多人聊天室准备的东西: 第一步:安装插件并且完善服务端第二步 :搭建客户端并与服务端的通信第三步 :添加CSS样式第四步:总结今天花了一个上午的时间去学习 ...
用“websocket第三方服务”野狗云实现双屏互动H5
背景这次想开发一个双屏互动的案例,考虑到数据实时性及ajax轮询对服务器的压力,尝试用websocket来实现. 自行搭建websocket服务,时间成本和技术成本较高,故寻找第三方服务.经检索,发 ...
Tomcat 深度解析_02
5.Web 应用配置 web.xml 是web应用的描述文件, 它支持的元素及属性来自于Servlet 规范定义 . 在Tomcat 中, Web 应用的描述信息包括 tomcat/conf/web. ...
Tomcat核心原理学习总结(二)
Tomcat 专题 Tomcat 专题二内容 5.Web 应用配置 5.1 ServletContext 初始化参数 5.2 会话配置 5.3 Servlet配置 5.4 Listener配置 5. ...
手机制作音乐专辑封面_你如何制作好的专辑封面
手机制作音乐专辑封面 The best-loved albums of all time only seem to stand out in our memories (and the shelves ...

WebSocket使用案例

WebSocket使用案例

目录

1. web客户端 websocket

1. WebSocket 属性

2. WebSocket 事件

3. WebSocket 方法

2. nodejs服务器端websocket

3. websocket案例

1. 客户端代码

2. 服务端代码

3. 效果展示

4. websocket部署在阿里云连接不上？

WebSocket使用案例相关推荐

最新文章

热门文章