当前位置:首页 » 网页前端 » 前端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客户端 连接上 服务端 就能实时通信了。