JSF 2.3 websocket如何与Ajax一起使用f:ajax actionlisenter?

时间:2017-10-02 16:27:26

标签: jsf websocket ajax-update

我尝试尝试JSF 2.3的新功能,其中一个很有吸引力的是websocket。

我已经阅读了一些来自mojarra测试和JSF 2.3特定@Push javadoc的示例代码。

使用f:websocketf:ajax时遇到了一些问题。

facelets模板是:

   <h:panelGroup id="messagePanel" layout="block">
        <ul>
            <ui:repeat value="#{ajaxBean.messages}" var="m">
                <li>#{m}</li>
            </ui:repeat>
        </ul>
    </h:panelGroup>

    <h:form id="form">
        <h:commandButton 
            id="sendMessage" 
            action="#{ajaxBean.sendMessage()}" 
            value="Send Ajax Message">
            <f:ajax/>
        </h:commandButton>
    </h:form>
    <h:form>
        <f:websocket channel="ajaxChannel" scope="view">
            <f:ajax event="ajaxEvent" render=":messagePanel" />
        </f:websocket>
    </h:form>
    <h:form>
        <f:websocket channel="ajaxListenerChannel" scope="view">
            <f:ajax event="ajaxListenerEvent" listener="#{ajaxBean.ajaxPushed}" render=":messagePanel" />
        </f:websocket>
    </h:form>

    <f:websocket channel="commandScriptChannel" scope="view" onmessage="onCommandScript"/>
    <h:form>
        <h:commandScript name="onCommandScript" action="#{ajaxBean.commandScriptExecuted()}" render=":messagePanel"/>
    </h:form>

后端bean是:

@ViewScoped
@Named("ajaxBean")
public class AjaxBean implements Serializable {

    private static final Logger LOG = Logger.getLogger(AjaxBean.class.getName());

    @Inject
    @Push
    PushContext ajaxChannel;

    @Inject
    @Push
    PushContext ajaxListenerChannel;

    @Inject
    @Push
    PushContext commandScriptChannel;

    private List<String> messages = new ArrayList<>();

    public void ajaxPushed(AjaxBehaviorEvent e) throws AbortProcessingException{
        LOG.log(Level.INFO, "ajax pushed: " + e.toString());

        messages.add("ajaxListenerEvent is sent at: " + LocalDateTime.now());

        ajaxListenerChannel.send("ajaxListenerEvent");
    }

    public void commandScriptExecuted() {
        LOG.log(Level.INFO, "commandScriptExecuted pushed.");

        messages.add("commandScriptExecuted message is sent at: " + LocalDateTime.now());

        commandScriptChannel.send("onCommandScript");
    }

    public void sendMessage() {
//        LOG.log(Level.INFO, "ajax pushed by button: " + e.toString());

        messages.add("ajaxEvent is sent at: " + LocalDateTime.now());

        ajaxChannel.send("ajaxEvent");
    }

    public List<String> getMessages() {
        return messages;
    }

    public void setMessages(List<String> messages) {
        this.messages = messages;
    }

}

结果是第一个按钮可以根据需要触发ajax输出。但是f:带有监听器的ajax不起作用,而h:commandScript在这里也不起作用。

如何纠正这些?

1 个答案:

答案 0 :(得分:3)

您的具体问题是由于您在代码中没有明确地向这些websockets发送推送消息而引起的。如果你的尝试在某种程度上是可能的,那么websocket将继续在无限循环中向自己发送推送消息。这没有意义。

为了明确发送推送消息,您必须让代码明确地调用push.send(message),就像您使用<h:commandButton>一样。

<h:form>
    <h:commandButton value="Send push message" action="#{bean.sendPushMessage}">
        <f:ajax />
    </h:commandButton>
</h:form>
<h:form>
    <f:websocket channel="pushWithAjaxUpdate" scope="view">
        <f:ajax event="updateMessages" listener="#{bean.updateMessages}" render=":messages" />
    </f:websocket>
</h:form>
<h:panelGroup id="messages" layout="block">
    <ul>
        <ui:repeat value="#{bean.messages}" var="message">
            <li>#{message}</li>
        </ui:repeat>
    </ul>
</h:panelGroup>

@Inject @Push
private PushContext pushWithAjaxUpdate;

public void sendPushMessage() {
    messages.add("Push message is sent at: " + LocalDateTime.now());
    pushWithAjaxUpdate.send("updateMessages");
}

public void updateMessages() {
    messages.add("Ajax event is received at: " + LocalDateTime.now());
}

我知道您只是在尝试,但应该说上述方法在现实世界的代码中也没有意义。 <f:websocket>在这个特定用例中是多余的,只需使用<h:commandButton><f:ajax listener="...">就足够了。在现实世界代码中,预期推送不是由同一页面中的某个命令按钮同步调用,而是由某些业务事件调用异步。否则,您可以将结果返回到ajax响应本身。这样可以节省额外的服务器往返次数。