(1)websocket

websocket(簡寫為ws),是一種輕量化的協(xié)議,經(jīng)過最開始的握手階段以后,前后端之間允許自由地發(fā)送信息不受限制(建議發(fā)送json字符串).雖然理論上這個東西是屬于協(xié)議內(nèi)容,但是已經(jīng)被瘋狂封裝得像框架一樣了.

websocket協(xié)議具有天然的優(yōu)勢處理前端多線程并發(fā),并且只需要一個后端就能完成服務(wù).在各大視頻網(wǎng)站上經(jīng)常能見到使用ws技術(shù)構(gòu)建的簡單聊天室項目.難能可貴的是,java,javascript都引入了相關(guān)的內(nèi)容.

本文主要介紹使用,對標面向?qū)ο蟮膶嶒?需要詳細看待原理建議去看文檔內(nèi)容

另外,websocket最重要的是四種狀態(tài)和他們的監(jiān)聽函數(shù),open,close,message,error

分別代表:某個用戶開啟服務(wù),某個用戶關(guān)閉服務(wù),某一端接收信息,某一端發(fā)生錯誤

(2)前端部署和發(fā)送信息

1.在前端部署websocket內(nèi)容

 websocket ws = new WebSocket("ws://127.0.0.1:8080/imserver/" + MyUsername);

很簡單,直接創(chuàng)建websocket即可連接到后端(后端這個網(wǎng)址怎么來的我們后續(xù)再討論,這個myUsername是我自己加上的內(nèi)容,相當于傳入一個參數(shù),可以先不用管)

2.前端發(fā)送信息

      let oj={
        signal:8,
        to:self.counterpart
      }
      self.ws.send(JSON.stringify(oj));

我這里舉了個例子,建立了一個對象,然后轉(zhuǎn)化為json字符串,直接找到對應(yīng)的ws對象,然后使用send即可

3.前端接收信息

前端接收信息和厚度按一樣,建立事件監(jiān)聽器,然后創(chuàng)建回調(diào)函數(shù)

    this.ws.onopen = function () {
      
    }

    this.ws.onclose=function(){
    
    }

    this.ws.onmessage = function (event) {
     //event是個接收到的1信息
    }

(3)后端部署websocket

后端部署websocket有點麻煩....這里主要講解springboot框架下的部署

首先在pom文件中部署如下幾個依賴

 <!--websocket啟動器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!--web啟動器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--熱部署內(nèi)容(不知道是干啥的)-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

然后創(chuàng)建如下幾個文件

?webConfig,這個是打開后端的攔截器,防止出現(xiàn)不能訪問的情況

package com.example.demochat.common.Config;

import com.example.demochat.component.AuthInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new AuthInterceptor()).addPathPatterns("/**").excludePathPatterns("/imserver/**");
    }
    
}

websocketConfig,ws有關(guān)的部署

package com.example.demochat.common.Config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

鏈接的時候用到的一個繼承類

package com.example.demochat.component;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

@Component
public class AuthInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 在此處實現(xiàn)身份驗證邏輯
        return true; // true 表示繼續(xù)執(zhí)行后續(xù)的攔截器或處理器方法，false 則會中斷請求處理
    }
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                           ModelAndView modelAndView) throws Exception {
        // 請求處理之后進行調(diào)用，但是在視圖被渲染之前（Controller方法調(diào)用之后）
    }
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
            throws Exception {
        // 在整個請求結(jié)束之后被調(diào)用，也就是在DispatcherServlet渲染了對應(yīng)的視圖之后執(zhí)行（主要是用于資源清理工作）
    }
}

最后是核心文件,

這個東西里面就是我們websocket的基本邏輯

首先是建立一個鏈接,要借用注解來聲明這里是都服務(wù)器的終端

里面會用到那些監(jiān)聽方法,有一個好消息是,我們不需要繼承websocket這個類或者說這個接口,然后重寫里面的方法.現(xiàn)在可以通過注釋來給幾個監(jiān)聽函數(shù)添加具體的回調(diào)

//建立一個雙通道的webSocket類

@ServerEndpoint("/imserver/{username}")
//這是一個聲明,聲明這里是服務(wù)器的終端,可以通過這個路徑訪問
//{}代表占位符,可以通過@PathParam注解獲取這個參數(shù)

@Component
public class WebSocketServer {

    //下面是四個基礎(chǔ)方法,當觸發(fā)對應(yīng)事件的時候,注解就會調(diào)用這些方法


    @OnOpen
    public void onOpen(Session session, @PathParam("username") String username) throws IOException {
           
    }

    //移除某個用戶
    @OnClose
    public void onClose(Session session, @PathParam("username") String username) throws IOException {
           
    }

  
    @OnMessage
    public void onMessage(String message,Session session,@PathParam("username") String username) throws IOException {
           
    }


    @OnError
    public void onError(Session session , Throwable err){//這里的參數(shù)類型必須是可拋出"Throwable"
      
    }

}

對應(yīng)的注解,標志著這個函數(shù)會在什么事件發(fā)生的時候調(diào)用

另外注意其中的參數(shù),Session對象代表的是當前觸發(fā)事件的具體對象,也就是前端窗口/用戶,當用戶觸發(fā)對應(yīng)事件的時候,就會填入對應(yīng)參數(shù)中message參數(shù)代表的是傳遞進來的信息

Throwable是需要拋出的從錯誤

這些參數(shù)是必須的

2.后端發(fā)送請求:

 session.getBasicRemote().sendText(message);
直接讓對應(yīng)的窗口對象接收即可

利用session對象的對應(yīng)方法發(fā)送消息即可文章來源地址http://www.zghlxwxcb.cn/news/detail-718882.html

到了這里，關(guān)于[前端基礎(chǔ)]websocket協(xié)議的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！