當前位置:首頁 » 網頁前端 » 前端websocket
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端websocket

發布時間: 2022-01-23 19:52:05

❶ js做的前端能通過websocket與c++寫的後端交互嗎

js做的前端能通過websocket與c++寫的後端交互,使用Easywsclient就可以實現。
1、WebSocket 類的寫法:
//創建webSocket的工廠方法
static pointer from_url(std::string url);
// 創建一個初始的WebSocket
static pointer create_mmy();

//實現真正的網路連接,發送和接收等IO操作

void poll(int timeout = 0); // 參數是超時時間
//接收返回消息並傳到callable中
template<class Callable>
void dispatch(Callable callable);
//發送text類型的消息
void send(std::string message);
//關閉連接
void close();

2、整體實現方法:
#include "easywsclient.hpp"
//#include "easywsclient.cpp" // <-- include only if you don't want compile separately

int
main()
{
...
using easywsclient::WebSocket;
WebSocket::pointer ws = WebSocket::from_url("ws://localhost:8126/foo");
assert(ws);
while (true) {
ws->poll();
ws->send("hello");
ws->dispatch(handle_message);
// ...do more stuff...
}
...
delete ws; // 可選, 使用 unique_ptr<> 如果使用的是 C++11
return 0;
}

❷ websocket建立連接時能傳遞參數嗎

可以傳參,以java為例

html中:

varwebsocket=newWebSocket("ws://ws.xxxx.con/what/webSocketServer?sid="+sid)

java中自定義 WebSocketHandshakeInterceptor, 在 beforeHandshake 方法中使用

Stringsid=((ServletServerHttpRequest)req).getServletRequest().getParameter("sid");

即可拿到 sid 的值,可以添加到 attributes 中使用


WebSocketHandler 的方法中,通過

session.getAttributes().get('sid')

可以拿到建立時傳遞的參數

❸ 前端怎麼調用socket

<!DOCTYPEhtml>
<metacharset="utf-8"/>
<title>WebSocketTest</title>
<scriptlanguage="javascript"type="text/javascript">
varwsUri="ws://echo.websocket.org/";
varoutput;

functioninit(){
output=document.getElementById("output");
testWebSocket();
}

functiontestWebSocket(){
websocket=newWebSocket(wsUri);
websocket.onopen=function(evt){
onOpen(evt)
};
websocket.onclose=function(evt){
onClose(evt)
};
websocket.onmessage=function(evt){
onMessage(evt)
};
websocket.onerror=function(evt){
onError(evt)
};
}

functiononOpen(evt){
writeToScreen("CONNECTED");
doSend("WebSocketrocks");
}

functiononClose(evt){
writeToScreen("DISCONNECTED");
}

functiononMessage(evt){
writeToScreen('<spanstyle="color:blue;">RESPONSE:'+evt.data+'</span>');
websocket.close();
}

functiononError(evt){
writeToScreen('<spanstyle="color:red;">ERROR:</span>'+evt.data);
}

functiondoSend(message){
writeToScreen("SENT:"+message);
websocket.send(message);
}

functionwriteToScreen(message){
varpre=document.createElement("p");
pre.style.wordWrap="break-word";
pre.innerHTML=message;
output.appendChild(pre);
}

window.addEventListener("load",init,false);
</script>
<h2>WebSocketTest</h2>
<divid="output"></div>
</html>

主要代碼解讀:

申請一個WebSocket對象,參數是需要連接的伺服器端的地址,同http協議使用http://開頭一樣,WebSocket協議的URL使用ws://開頭,另外安全的WebSocket協議使用wss://開頭。。

varwsUri="ws://echo.websocket.org/";
websocket=newWebSocket(wsUri);

WebSocket對象一共支持四個消息 onopen, onmessage, onclose和onerror,

我們可以看出所有的操作都是採用消息的方式觸發的,這樣就不會阻塞UI,使得UI有更快的響應時間,得到更好的用戶體驗。

當Browser和WebSocketServer連接成功後,會觸發onopen消息;

websocket.onopen=function(evt){
};

如果連接失敗,發送、接收數據失敗或者處理數據出現錯誤,browser會觸發onerror消息;

websocket.onerror=function(evt){
};

當Browser接收到WebSocketServer發送過來的數據時,就會觸發onmessage消息,參數evt中包含server傳輸過來的數據;

websocket.onmessage=function(evt){
};

當Browser接收到WebSocketServer端發送的關閉連接請求時,就會觸發onclose消息。

websocket.onclose=function(evt){
};

WebSocket與TCP、HTTP的關系WebSocket與http協議一樣都是基於TCP的,所以他們都是可靠的協議,Web開發者調用的WebSocket的send函數在browser的實現中最終都是通過TCP的系統介面進行傳輸的。

WebSocket和Http協議一樣都屬於應用層的協議,那麼他們之間有沒有什麼關系呢?答案是肯定的,WebSocket在建立握手連接時,數據是通過http協議傳輸的,但是在建立連接之後,真正的數據傳輸階段是不需要http協議參與的。

❹ 前端怎麼給websocket的onopen方法穿參

WebSocket是html5新增加的一種通信協議,目前流行的瀏覽器都支持這個協議,例如Chrome,Safari,Firefox,Opera,IE等等,對該協議支持最早的應該是chrome,從chrome12就已經開始支持,隨著協議草案的不斷變化,各個瀏覽器對協議的實現也在不停

❺ 前端項目使用websocket,該如何進行 業務流程的控制

WebSocket的出現是基於Web應用的實時性需要而產生的。這種實時的Web應用大家應該不陌生,在生活中都應該用到過,比如新浪微博的評論、私信的通知,騰訊的WebQQ等。讓我們來回顧下實時 Web 應用的窘境吧。

❻ websocket是前台完成還是後台完成

前台實現

1 connect:function() {

2 var webSocketIP = window.CRM_CONFIG.WebSocketIP;

3 var target = 'ws://'+webSocketIP+'/websocket';

4 if ('WebSocket' in window) {

5 ws = new WebSocket(target);

6 } else if ('MozWebSocket' in window) {

7 ws = new MozWebSocket(target);

8 } else {

9 return;

10 }

11 ws.onopen = function () {

12 console.log('Info: WebSocket connection opened.');

13 document.getElementById("wsMsg").style.display = "block";

14 };

15 var self = this;

16 ws.onmessage = function (event) {

17 if('您有如下工單需要及時處理:'!= event.data) {

18 self.setState({wsMessage: event.data})

19 document.getElementById("wsMsg").style.display = "block";

20 }else{

21 document.getElementById("wsMsg").style.display = "none";

22 }

23 };

24

25 <div id="wsMsg" className="msgDialog msgDiv">

26 <div className="msgContent" ><a onClick ={this.closeMsg}> X </a></div>

27 {this.state.wsMessage}

28 </div>

2、pom.xml依賴

1 <!--spring-websocket-->

2 <dependency>

3 <groupId>javax.servlet</groupId>

4 <artifactId>javax.servlet-api</artifactId>

5 <version>3.1.0</version>

6 </dependency>

7 <dependency>

8 <groupId>org.springframework</groupId>

9 <artifactId>spring-websocket</artifactId>

10 <version>${spring.version}</version>

11 </dependency>

3、spring.xml配置

<!--websocket 配置-->

<bean id="websocket" class="com.oasis.crm.controller.websocket.WebsocketEndPoint"/>

<websocket:handlers allowed-origins="*">

<websocket:mapping path="/websocket" handler="websocket"/>

<websocket:handshake-interceptors>

<bean class="com.oasis.crm.controller.websocket.HandshakeInterceptor"/>

</websocket:handshake-interceptors>

</websocket:handlers>

4、java代碼

package com.oasis.crm.controller.websocket;

import com.oasis.crm..biz.user.UserDao;

import com.oasis.crm.model.biz.user.User;

import com.oasis.crm.service.biz.order.AcceptedWorkOrderService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.socket.CloseStatus;

import org.springframework.web.socket.TextMessage;

import org.springframework.web.socket.WebSocketSession;

import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.Timer;

import java.util.TimerTask;

/**

* 推送即將要處理完成的受理單給處理人

*/

@RequestMapping("/websocket")

public class WebsocketEndPoint extends TextWebSocketHandler {

@Autowired

private AcceptedWorkOrderService acceptedWorkOrderService;

@Autowired

private UserDao userDao;

private Timer timer;

@Override

protected void handleTextMessage(WebSocketSession session,

TextMessage message) throws Exception {

if(!session.isOpen()){

timer.cancel();

return;

}

super.handleTextMessage(session, message);

session.sendMessage(message);

}

@Override

public void afterConnectionEstablished(WebSocketSession session) throws Exception {

String loginUserName = session.getPrincipal().getName();

User user = userDao.findUserByLoginName(loginUserName);

timer = new Timer(true);

long delay = 0;

OrderTimeTask orderTimeTask = new OrderTimeTask(user,session);

timer.schele(orderTimeTask,delay, 60000);// 設定指定的時間time,此處為1分鍾

}

class OrderTimeTask extends TimerTask{

private User user;

private WebSocketSession session;

public OrderTimeTask(User user,WebSocketSession session){

this.user = user;

this.session = session;

}

@Override

public void run() {

try {

String reminder = acceptedWorkOrderService.getLastReminderOrder(user.getId());

TextMessage textMessage = new TextMessage(reminder);

handleMessage(session,textMessage);

} catch (Exception e){

e.printStackTrace();

}

}

}

@Override

public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {

System.out.println("Connection Closed!");

}

}

package com.oasis.crm.controller.websocket;

import org.springframework.http.server.ServerHttpRequest;

import org.springframework.http.server.ServerHttpResponse;

import org.springframework.web.socket.WebSocketHandler;

import org.springframework.web.socket成都軟體開發公司http://www.yingtaow.com?server.support.;

import java.util.Map;

public class HandshakeInterceptor extends {

@Override

public boolean beforeHandshake(ServerHttpRequest request,

ServerHttpResponse response, WebSocketHandler wsHandler,

Map<String, Object> attributes) throws Exception {

return super.beforeHandshake(request, response, wsHandler, attributes);

}

@Override

public void afterHandshake(ServerHttpRequest request,

ServerHttpResponse response, WebSocketHandler wsHandler,

Exception ex) {

super.afterHandshake(request, response, wsHandler, ex);

}

}

================

或者前台拉定時取消息

setInterval(()=> {

this.getReminders();

}, 300000);

getReminders(){

$.getJSON(Remote.acceptedWorkOrder.reminderOrders,packVo=>{

this.setState({

wsMessage:packVo.vo

});

});

if('您有如下工單需要及時處理:'!= this.state.wsMessage&&''!=this.state.wsMessage){

document.getElementById("wsMsg").style.display = "block";

}else{

document.getElementById("wsMsg").style.display = "none";

}

}

❼ 我想問一下神通廣大的各位網友,為什麼我前端使用websocket通信的時候後台可以接收到我客戶端發送的消息

樓主可以檢查下你websocket客戶端的接收方式是否有問題哦。
你能發送成功,說明發送代碼沒問題,要好好對比檢查下接收代碼是否有問題。另外伺服器端發送的數據格式跟客戶端要接收的數據格式是否一致,也要好好檢查下的。
樓主是自己開發的websocket服務哇,我們之前也是自己開發,但是穩定性是一個大問題,後來試用了【GoEasy】的websocket集成服務,還是很滿意的。

❽ 前端小白想問,websocket如何實現多個瀏覽器同步數據的求大佬給個思路

你說的是消息推送吧,推送的時候就可以實現,單獨推送,或全體推送,

❾ web前端可以使用websocket開啟服務嗎

1 通訊通道選擇:這個很多前端高手已經回答了,基本就是兩種方式:輪詢和長連接,這種情況通常的解決方式是長連接,Web端可以用WebSocket來解決,這也是業界...

❿ 怎樣用java web和websocket實現網頁即時通訊

java 後台做 websocket 服務端。 頁面使用js的websocket客戶端 連接上 服務端 就能實時通信了。