WebSocket使用教程

WebSocket是H5新推出的一种协议
实现了服务器与浏览器的全双工通信
它的优点:
1、节省服务器资源和带宽
2、实时通讯
它出现的背景:
web应用实时性的需求(比如微博的留言评论)
 
WebSocket通过浏览器提供的API真正实现了具备像C/S架构下的桌面系统的实时通讯能 力。其原理是使用JavaScript调用浏览器的API发出一个WebSocket请求至服务器,经过一次握手,和服务器建立了TCP通讯,因为它本质 上是一个TCP连接,所以数据传输的稳定性强和数据传输量比较小。
 
WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
 
JavaScript调用浏览器接口实例如下:
var wsServer = 'ws://localhost:8888/Demo'; //服务器地址
var websocket = new WebSocket(wsServer); //创建WebSocket对象
websocket.send("hello");//向服务器发送消息
alert(websocket.readyState);//查看websocket当前状态
websocket.onopen = function (evt) {
//已经建立连接
};
websocket.onclose = function (evt) {
//已经关闭连接
};
websocket.onmessage = function (evt) {
//收到服务器消息,使用evt.data提取
};
websocket.onerror = function (evt) {
//产生异常
}; 
 

转载于:https://www.cnblogs.com/changningios/p/6440076.html

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得浏览器和服务器之间的实时通信变得更加容易。这篇教程将介绍如何使用WebSocket。 ### 客户端 #### 建立WebSocket连接 在客户端,我们可以使用JavaScript中的WebSocket API来建立WebSocket连接。首先,我们需要创建一个WebSocket对象并指定服务器的URL: ``` var ws = new WebSocket("ws://example.com/socket"); ``` 在这个例子中,我们使用ws协议来连接example.com上的服务器的socket端点。如果要使用wss协议(加密的WebSocket连接),则需要在URL中使用wss。 #### 发送和接收消息 建立连接后,我们可以使用WebSocket对象的send()方法向服务器发送消息: ``` ws.send("Hello, world!"); ``` 我们还可以为WebSocket对象添加一个onmessage事件处理程序来处理从服务器接收到的消息: ``` ws.onmessage = function(event) { console.log("Received message: " + event.data); }; ``` 在这个例子中,我们使用console.log()函数将接收到的消息打印到控制台。 #### 关闭连接 如果我们想要关闭WebSocket连接,可以使用WebSocket对象的close()方法: ``` ws.close(); ``` 我们还可以为WebSocket对象添加一个onclose事件处理程序来处理连接关闭事件: ``` ws.onclose = function(event) { console.log("Connection closed: " + event.code + " " + event.reason); }; ``` 在这个例子中,我们使用console.log()函数将关闭事件的代码和原因打印到控制台。 ### 服务器端 #### 建立WebSocket服务器 要建立WebSocket服务器,我们可以使用许多不同的库和框架。在这个例子中,我们将使用Node.js和ws库。 首先,我们需要安装ws库: ``` npm install ws ``` 然后,我们可以创建一个WebSocket服务器并侦听连接: ``` var WebSocketServer = require('ws').Server; var wss = new WebSocketServer({ port: 8080 }); wss.on('connection', function(ws) { console.log('Client connected'); ws.on('message', function(message) { console.log('Received message: ' + message); ws.send('Hello, client!'); }); ws.on('close', function() { console.log('Client disconnected'); }); }); ``` 在这个例子中,我们创建了一个WebSocket服务器并侦听8080端口。当客户端连接时,我们使用console.log()函数打印一条消息。当接收到消息时,我们再次使用console.log()函数打印一条消息,并向客户端发送一条消息。当连接关闭时,我们也打印一条消息。 #### 发送和接收消息 要向客户端发送消息,我们可以调用WebSocket对象的send()方法: ``` ws.send('Hello, client!'); ``` 我们还可以使用WebSocket对象的onmessage事件处理程序来处理从客户端接收到的消息: ``` ws.on('message', function(message) { console.log('Received message: ' + message); }); ``` 在这个例子中,我们使用console.log()函数将接收到的消息打印到控制台。 #### 关闭连接 要关闭WebSocket连接,我们可以调用WebSocket对象的close()方法: ``` ws.close(); ``` 我们还可以使用WebSocket对象的onclose事件处理程序来处理连接关闭事件: ``` ws.on('close', function() {
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值