精华内容
下载资源
问答
  • websocket前端页面与后台交互的例子,解压文件后,用idea导入项目,启动WebsocketServer类,接着用浏览器打开websocket.html页面,会看到建立连接,然后在发送框输入{"id":"1","type":"yes"},返回666,输入其他信息...
  • websocket---前端的实现(一)

    万次阅读 2017-08-09 00:26:03
    1.使用websocket可以方便的实现服务器端主动的向客户端推送消息,而不用在使用轮询和定时器的方式获取数据 2.websocket协议特点: 1)建立在TCP协议之上 2)与HTTP协议有着很好的兼容性,默认端口也是80和443,并且...

    1.使用websocket可以方便的实现服务器端主动的向客户端推送消息,而不用在使用轮询和定时器的方式获取数据

    2.websocket协议特点:

    1)建立在TCP协议之上

    2)与HTTP协议有着很好的兼容性,默认端口也是80和443,并且握手阶段采用HTTP协议,因此握手时不容易屏蔽,能通过各种HTTP代理服务器

    3)数据格式比较轻量,性能开销小,通信高效

    4)可以发送文本,也可以发送二进制数据

    5)没有同源限制,客户端可以与任意服务器通信

    6)协议标识是ws(如果加密,则为wss),服务器网址是URL


    一)h5原生的websocket的api

    1.创建websocket的对象

    	var websocket  = new WebSocket("ws://localhost:8080/websocket");

    2.websocket实例的readyState属性

    websocket.readyState有四种结果代表当前websocket的状态

    a.  CONNECTING: 值为0,表示正在连接

    b. OPEN:值为1,表示连接成功,可以通信

    c.CLOSING:值为2,表示连接正在关闭

    d.CLOSED:值为3,表示连接已经关闭,或者打开连接失败

    3.websocket实例的onopen属性

    websocket.onopen,用于指定连接成功之后的回调函数

    	websocket.onopen = function () {
            	console.log(websocket.readyState)
    	}
    连接成功之后如果有多个回调函数的话,可以使用websocket的函数websocket.addEventListener();

    websocket.addEventListener('open',function(event){

    websocket.send(''hello websocket");

    })

    4.websocket实例的onclose属性

    websocket.onclose,用于指定连接关闭后的回调函数

    	websocket.onclose = function () {
        		console.log("websocket连接关闭")
    	}
    连接关闭之后多个回调函数的话,可以使用websocket的行数websocket.addEventListener();

    websocket.addEventListener('close',function(event){

    var code = event.code;

    var reason = event.reason;

    var wasClean = event.wasClean;

    })

    5.webSocket实例的onmessage属性

    webSocket.onmessage 用于指定收到服务器数据后的回调函数,同样可以使用websocket.addEventListener('message',function(event){})接受消息

    	websocket.onmessage = function (event) {
        		console.log(event.data);
    	}

    收到的消息可能是文本格式,也可能是二进制数据(blob对象或者Arraybuffer)

    websocket.onmessage(function(event){

    if(typeof event.data == string){

    console.log('get data is string');

    }

    if(event.data interfaceof ArrayBuffer){

    console.log('get data is ArrayBuffer');

    }

    })


    可以使用websocke.binaryType指定收到的消息的格式   binaryType = 'blob';

    6.websocket实例的send()方法向服务器端发送消息,可以是文本格式,可以是blob对象或者ArrayBuffer

    	websocket.send(document.getElementById('text').value);
    7.websocket实例的bufferedAmount属性,表示还有多少二进制字节没有发送出去,可以判断发送是否结束

    	websocket.send(document.getElementById('text').value);
    	if(websocket.bufferedAmount == 0){
    		console.log('发送结束');
    	}else{
    		console.log('发送正在进行');
    	}
    
    8.websocket实例的onerror属性,用于指定websocket连接发生错误时候的回调函数

    二)sockJS.js模拟的websocket

    sockJS模拟的websocket与h5的websocket的api相仿,特别注意sockJS连接的协议是http而非ws

     var sock = new SockJS("http://localhost:8080/hello");
      sock.onopen = function() {
      console.log("连接成功");
          };
          sock.onmessage = function(event) {
        console.log("接收的数据"+event.data)
          };
          sock.onclose = function() {
        console.log("websocket连接关闭")
          }
          //向服务器发送消息
          websocket.send(document.getElementById('text').value);
    //关闭连接
    websocket.close();



    展开全文
  • websocket前端实现

    2020-12-28 22:18:03
    WebSocket前端准备SockJS:SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。StompStomp ...

    WebSocket前端准备

    SockJS:

    SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。

    Stomp

    Stomp 提供了客户端和代理之间进行广泛消息传输的框架。Stomp 是一个非常简单而且易用的通讯协议实现,尽管代理端的编写可能非常复杂,但是编写一个 Stomp 客户端却是很简单的事情,另外你可以使用 Telnet 来与你的 Stomp 代理进行交互。

    发送公告功能

    html代码

    javascript代码

    相关说明:

    关于JavaScript实现WebSocket的功能很简单,基本分以下几步:

    开启Socket

    var socket = new SockJS('/socket'); 先构建一个SockJS对象

    stompClient = Stomp.over(socket); 用Stomp将SockJS进行协议封装

    stompClient.connect() 与服务端进行连接,同时有一个回调函数,处理连接成功后的操作信息。

    发送消息

    stompClient.send("/app/change-notice", {}, value);

    页面预览:

    Paste_Image.png

    修改公告功能

    当我们发送公告后,将上图的公告信息在不刷新页面的情况下,使用WebSocket将其改变。发送公告的前端代码已经完成,现在我们来写另一个客户端,用来接收第一个页面发送的公告,展示在上图红框中。

    功能比较简单,所以下面只给出部分js代码:

    相关说明:

    这里与发送公告代码不同的是,在stompClient建立连接成功之后,我们要监听服务端发送过来的信息,接收到之后,改变页面上公告的内容,所以用到了stompClient.subscribe()

    这个subscribe()方法功能就是定义一个订阅地址,用来接收服务端的信息(在服务端代码中,我们在@SendTo中指定了这个订阅地址“/topic/notice”),当收到消息后,在回调函数中处理业务逻辑。

    至此,所有的功能开发完毕!

    效果演示

    首先我们发布一条公告:

    然后我们切到另一个页面,发现内容已变:

    展开全文
  • Swoole WebSocket实例

    2021-04-18 09:36:35
    Swoole WebSocket实例SwooleWebSocket介绍swoole-1.7.9 增加了内置的websocket服务器支持,通过几行PHP代码就可以写出一个异步非阻塞多进程的WebSocket服务器。常见使用场景:我们在使用php开发的时候,原生最不好用...

    Swoole WebSocket实例

    Swoole WebSocket介绍

    swoole-1.7.9 增加了内置的websocket服务器支持,通过几行PHP代码就可以写出一个异步非阻塞多进程的WebSocket服务器。

    常见使用场景:我们在使用php开发的时候,原生最不好用的是socket类库了,而在开发IM和及时通信项目是,我们现在有了新的选择后端使用php Swoole WebSocket + 前端 html5 WebSocket;

    简单实例:

    $server = new swoole_websocket_server("0.0.0.0", 9501);

    $server->on('open', function (swoole_websocket_server $server, $request) {

    echo "server: handshake success with fd{$request->fd}\n";

    });

    $server->on('message', function (swoole_websocket_server $server, $frame) {

    echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";

    $server->push($frame->fd, "this is server");

    });

    $server->on('close', function ($ser, $fd) {

    echo "client {$fd} closed\n";

    });

    $server->start();

    onRequest回调

    swoole_websocket_server 继承自 swoole_http_server

    设置了onRequest回调,websocket服务器也可以同时作为http服务器

    未设置onRequest回调,websocket服务器收到http请求后会返回http 400错误页面

    客户端

    Chrome/Firefox/高版本IE/Safari等浏览器内置了JS语言的WebSocket客户端

    异步的PHP程序中可以使用Swoole\Http\Client作为WebSocket客户端

    apache/php-fpm或其他同步阻塞的PHP程序中可以使用swoole/framework提供的同步WebSocket客户端

    非WebSocket客户端不能与WebSocket服务器通信

    甚至你还可以结合使用socket.io来配合开发

    展开全文
  • websocket使用实例

    2021-08-26 17:04:04
    //开启WebSocket支持 @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); } } @Component @Slf4j @...
    //开启WebSocket支持
    @Configuration
    public class WebSocketConfig {
        @Bean
        public ServerEndpointExporter serverEndpointExporter(){
            return new ServerEndpointExporter();
        }
    }
    
    
    @Component
    @Slf4j
    @Service
    @ServerEndpoint("/web/websocket/{userId}/{movieId}")
    /*注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
    注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端*/
    public class WebSocketServer {
        //concurrent包的线程安全,用于存所有的连接服务的客户端,这个对象存储是安全的
        private static ConcurrentHashMap<Session, List<Long>> webSocketSet = new ConcurrentHashMap<>();
        //与客户端链接会话,需要通过他来给客户端发送数据
        private Session session;
        private Long userId;
        private Long movieId;
    
        /**
         * @Description: 连接建立成功调用的方法
         * @Param: [session]
         * @return: void
         * @Date: 2021/8/18
         */
        @OnOpen
        public void onOpen(Session session, @PathParam("userId") Long userId, @PathParam("movieId") Long movieId) {
            this.session = session;
            this.userId = userId;
            this.movieId = movieId;
            ArrayList<Long> list = new ArrayList<>();
            list.add(userId);
            list.add(movieId);
            webSocketSet.put(session, list);
            log.info("[webSocket] 连接成功,当前人数为:" + webSocketSet.size());
        }
    
        /**
         * @Description: 连接关闭调用的方法
         * @Param: []
         * @return: void
         * @Date: 2021/8/18
         */
        @OnClose
        public void onClose() {
            webSocketSet.remove(this.session);  //从set中删除
            log.info("[webSocket] 客户端·" + this.userId + "退出成功,当前人数为:" + webSocketSet.size());
        }
    
        /**
         * @Description: 接收客户端消息
         * @Param: [message]
         * @return: void
         * @Date: 2021/8/18
         */
        @OnMessage
        public void onMessage(String message) {
            log.info("收到来自窗口" + "的信息: " + message);
            JSONObject obj = JSONUtil.parseObj(message);
            this.sendAll(message, obj.get("id").toString());
        }
    
        /**
         * @Description:发生错误
         * @Param: [session, error]
         * @return: void
         * @Date: 2021/8/18
         */
        @OnError
        public void onError(Session session, Throwable error) {
            log.error("发生错误");
    //        error.printStackTrace();
        }
    
        /**
         * @Description: websocket群发消息
         * @Param: [message, movieId]
         * @return: void
         * @Date: 2021/8/18
         */
        public void sendAll(String message, String movieId) {
            if (!StringUtils.hasText(movieId)) throw new ValidationException("消息对应的id为空");
            for (Map.Entry<Session, List<Long>> sessionListEntry : webSocketSet.entrySet()) {
                //只发送消息给 看相同movieId的websocket客户端
                if (sessionListEntry.getValue().get(1).equals(Long.parseLong(movieId))) {
                    try {
                        sessionListEntry.getKey().getBasicRemote().sendText(message);
                    } catch (IOException e) {
                        log.error("群发弹幕消息失败");
                    }
                }
            }
        }
    
        /**
        * @Description: 发送指定消息
        * @Param: [userId, movieId, msg]
        * @return: void
        * @Date: 2021/8/19
        */
        public void appointSending(Long userId, Long movieId, String msg) {
            webSocketSet.entrySet().forEach(ws -> {
                if (ws.getValue().get(0).equals(userId) && ws.getValue().get(1).equals(movieId)) {
                    try {
                        ws.getKey().getBasicRemote().sendText(msg);
                    } catch (IOException e) {
                        log.error("指定客户端发送弹幕失败");
                    }
                }
            });
        }
    
    }
    
    

    前端,实时弹幕推送示例

    let dp = new DPlayer({
    				container: document.getElementById('dplayer'),
    				preload: 'auto', // 自动预加载
    				video: {
    					url: this.filmContent.videoPath
    				},
    				danmaku: {
    					id: this.filmContent.movieId,
    					user: this.filmContent.userId,
    					api: this.danmuBaseUrl
    				}
    			});
    
    			///实时推送弹幕
    			if (this.ws == null) {
    				this.ws = new WebSocket(this.wsurl + this.filmContent.userId + '/' + this.filmContent.movieId);
    			}
    			this.ws.onmessage = res => {
    				let danmu = JSON.parse(res.data);
    				console.log(danmu);
    				if (this.filmContent.userId !== danmu.author) {
    					dp.danmaku.draw(danmu);
    				}
    			};
    
    展开全文
  • WebSocket实例项目

    千次阅读 2018-04-16 09:06:20
    一、项目简介WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用UMEditor。二、涉及知识点网页前端...
  • WebSocket使用实例

    2020-12-13 10:37:50
    使用node创建服务端程序,首先要安装node环境,然后安装WebSocket依赖包,命令为: npm i ws -S 包安装好以后创建app.js 作为后端服务的项目文件,代码如下: //引入ws包 const WebSocket = require('ws');...
  • Java微信扫码登录+websocket通知前端

    千次阅读 2019-12-06 16:54:04
    1,vue前端登录页面 <script> export default { name: "login", data() { return { path: "ws://passport.shuidizhihui.com/studyassistant/websocket/", socket: "", date:...
  • Java Websocket实例【项目实战系列】

    千次阅读 2017-07-12 07:10:13
     + window.location.host + ”/activemq-client/websocket/”+myWebsocket;     if (‘WebSocket’ in window) {    webSocket  =  new  WebSocket(target);   } else if (‘MozWebSocket’ ...
  • WebSocket 前端代码示例

    千次阅读 2019-06-19 10:57:59
    var ws = new WebSocket("ws://localhost:8080"); ws.onopen = function() { ws.send("hello"); }; ws.onmessage = function (e) { console.log(e.data); }; ws.onclose = function() { console.log...
  • 前端建立WebSocket(单纯new)

    千次阅读 2020-12-08 16:07:02
    this.wSocket = new WebSocket('ws://192.xx.xx.xx:8080/xxx/xxxx'); //记住没有http:// if (!this.wSocket) { console.log('您的浏览器不支持websocket协议!'); //不进来这个表示浏览器支持WebSocket } PS:...
  • 对于前端而言编写的方法相对比较简单了 首先是建立webSocket连接,这一步中会检测浏览器是否支持webSocket,如果支持则将http协议升级为TCP协议并发送连接到服务器。连接路径的格式和后端的连接暴露点格式一致。...
  • 前端WebSocket详解

    万次阅读 2019-03-15 04:40:04
    websocket是H5才开始提供的一种在单个TCP连接上进行全双工通讯的协议。主要作用就是建立服务器和客户端的长连接能更好的节省服务器资源和带宽,服务器向浏览器推流实现实时通信。 复制代码 和http一样,WebSocket也...
  • webSocket前后端连接实例

    千次阅读 2020-04-29 20:02:36
    简介 ...通信请求只能由客户端发起,服务端对请求做出应答处理。它是单向的,也就导致无法实现服务器主动...但有些时候,我们是需要前后端保持长久的、双向的联系,前端实时获取后端推送过来的信息,而不是自己去发送一...
  • 前端封装WebSocket

    2020-08-28 15:42:56
    最近遇到的项目不少都要使用websocket,这儿我把它封装起来,使用起来非常简单。 1.首先在项目里面创建一个webSocketUtils.js的文件 let FarmWebSocket = function ({ url, sendMessage, webSocketBack, ...
  • JavaScript前端websocket简单总结

    千次阅读 2018-12-17 22:25:43
    1. websocket 由于http请求只能由客户端发起,所有当服务器资源有变化时,客户端只能通过轮询的方式。非常浪费资源。 websocket的特点: 服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是...
  • WebSocket 推送数据至前端接口实例

    千次阅读 2018-12-13 16:36:27
    package com.xxxx.jcbigdata.websocket; import java.io.IOException; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.concurrent.CopyOnWriteArraySet; import javax.w...
  • 【Java】WebSocket实例

    2019-07-29 21:48:57
    一、DEMO实现 (1)客户端实现。 <button onclick="sendMsg()">发送消息</button>... var webSocket = new WebSocket('ws://localhost:8080/TestWebSocket/websocket/' + 'huangwei...
  • 客户端使用在页面上的使用还是非常简单的,和上一篇的SSE类似,代码如下:图1浏览器提供了原生接口WebSocket,使用它的实例然后绑定几个事件就可以使用了!WebSocket的第一个参数是一个实现了web...
  • 介绍 websocket可以在用户的浏览器和服务器之间打开交互式通信会话,使用websocket可以向服务器发送消息并接收事件驱动的响应,而无需...首先介绍一下前端websocket一些基本接口。 Websocket API 实例化 let socket...
  • 目录一、介绍1....3.spring与websocket整合需要spring 4.x,并且使用了socketjs,对不支持websocket的浏览器可以模拟websocket使用二、方式一:tomcat使用这种方式无需别的任何配置,只需服务端一...
  • websocket创建实例, 监听事件 if (window.WebSocket){ let ws = new WebSocket('地址') // 建立连接 ws.onopen = function(){ } // 服务器连接成功 ws.onclose = function(){ } // 服务器连接关闭 ws.onerror = ...
  • 主要为大家详细介绍了SpringMVC整合websocket实现消息推送及触发功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1、引入WebSocket依赖 <!--引入webSocket技术--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> &...
  • 前端WebSocket的使用

    2020-07-29 09:20:23
    WebSocket 的使用 websocket是HTML5开始提供的一种网络通信协议,它的目的是在浏览器之间建立一个不受限的双方通信的通道,比如说,服务器可以在任意时刻发送信息给浏览器。在websocket的API 中,浏览器和服务器只...
  • websocket看文章必读vue部分实现前端websocket 看文章必读 这个文章所涉及的技术并不是很理解,但是主要是实现一个前后端实现通信的功能! vue部分实现前端websocket 首先要通过 new WebSocket(“服务器地址”...
  • websocket实例

    2021-06-15 23:34:07
    前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=...
  • 前端Websocket的使用

    千次阅读 2018-08-16 20:28:17
    前段时间因工作业务需要,简单了解了一下Websocket的概念和前端的使用。总结如下: 概念: Websocket是一种协议,通过客户端和服务器之间的长久的TCP通信,使客户端和服务器之间可以随时交换数据。 使用场景: 由于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,153
精华内容 4,061
关键字:

websocket实例前端