资讯专栏INFORMATION COLUMN

websocket初步认知

lemon / 1306人阅读

摘要:什么是是一个持久化的协议,改协议定义了一个用以在和建立一个连接。是建立在的基础上,复用了的握手环节,握手成功后经过协商在走协议格式的数据。

什么是websocket

Websocket是一个持久化的协议,改协议定义了一个 API 用以在browser和server建立一个 socket 连接。WebSocket是建立在http的基础上,复用了HTTP的握手环节,握手成功后经过协商在走Websocket协议格式的数据。

websocket应用场景

websocket可以用来实现弹幕,协同编辑,在线社交聊天等功能。因为websocket的兼容性问题,如下所示,只支持ie11+

所以还有其它几种方案作为兼容性问题的补充,常见的比如说轮训方案(浏览器定时重复向服务器发送http请求,服务器相应,客户端得到数据后,将其显示出来,不断的重复这一过程 )、长轮询(客户端打开了一个到服务端的 HTTP 连接直到返回响应数据)。

websocket使用
//server
let WSServer = require("ws").Server;
let wsServer = new WSServer({ port: 8888 });
wsServer.on("connection", function (socket) {
    console.log("客户端已经连接");
    //监听客户端发过来的ith
    socket.on("message", function (message) {
        console.log(message);
        socket.send(" from  server:" + "hello");
    });
});
//client
 let socket = new WebSocket("ws://localhost:8888");
    socket.onopen = function () {
        socket.send("from client hello");
    }
    socket.onmessage = function (event) {
        console.log(event.data);
    }

输出结果

说明 上面是一个简单的示例,建立连接并发送数据。
在真实项目应用中,会借助于第三方成熟的库,例如Socket.IO(包括了brower和server(node)的实现代码),支持跨平台,根据浏览器兼容自动从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,简单使用举例如下所示。

//server
var express = require("express");
var path = require("path");
var app = express();

app.get("/", function (req, res) {
    res.sendFile(path.resolve("index.html"));
});

var server = require("http").createServer(app);
var io = require("socket.io")(server);

io.on("connection", function (socket) {
    console.log("客户端已经连接");
    socket.on("message", function (msg) {
        console.log(msg);
        socket.send("sever:" + msg);
    });
});
server.listen(80);
//client

var socket = io.connect("/");
socket.on("connect",function(){
   //客户端连接成功后发送消息"welcome"
   socket.send("welcome");
});
//客户端收到服务器发过来的消息后触发
socket.on("message",function(message){
   console.log(message);
});

说明 除了上面演示中的功能外,Socket.IO还支持命名空间,房间的划分,也支持指定范围的广播。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95295.html

相关文章

  • handsontable初步认知

    摘要:待更新左上角单元格赋值问题,通过改源码实现。下拉单元格高度修改,定位元素修改时下拉列表的最后一个显示不全,有。 hansontable简介 是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。 核心是由原生JavaScript构建,充分模块化,支持自定义build。 除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部...

    mrcode 评论0 收藏0
  • handsontable初步认知

    摘要:待更新左上角单元格赋值问题,通过改源码实现。下拉单元格高度修改,定位元素修改时下拉列表的最后一个显示不全,有。 hansontable简介 是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。 核心是由原生JavaScript构建,充分模块化,支持自定义build。 除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部...

    wslongchen 评论0 收藏0
  • Notadd PHP 到 Node 版 初步体验与测试

    摘要:另外,团队更加友好的类型检查极大方便了后端的开发。初步的性能测试无读写操作的接口响应时间在本地,读写操作接口响应时间在,已经远低于之前版本的。并发量预估也会有不小的提升。 2.0-alpha1 预览版本 这个版本主要用于预览后台,一些接口还没对接。 Adonis.js 到 Nest.js AonisJS 是一个 Node.js 版的 Laravel ,起初是打算用 AdonisJS,...

    JinB 评论0 收藏0
  • vue2.0开发聊天程序(八) 初步完成

    摘要:主要表现在复杂的语句事务支持等。仅支持,在等浏览器中,会出现样式布局混乱的情况。将群群对应的聊天记录保存在数据库。用户进入群聊,则将其加入到对应的中。文件大小不能超过通过模块操作登录注册将用户名作为唯一值。登录支持自动登录,将密码保存在中。 showImg(https://segmentfault.com/img/bV4jYr?w=402&h=710);showImg(https://...

    wmui 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<