1、怎么搭建一个简易的websocket架子,让前端后端用来交互?
我们采用引入三方jar的方式进行搭建,需要的jar如下:
<dependency>
<groupId>org.atmosphere</groupId>
<artifactId>atmosphere-runtime</artifactId>
</dependency>
<dependency>
<groupId>javax.inject</groupId>
<artifactId>javax.inject</artifactId>
</dependency>
需要再web,xml里面进行配置一个servlet
<servlet>
<description>AtmosphereServlet</description>
<servlet-name>AtmosphereServlet</servlet-name>
<servlet-class>org.atmosphere.cpr.AtmosphereServlet</servlet-class>
<init-param>
<param-name>org.atmosphere.cpr.packages</param-name>
<param-value>具体的包的目录</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>AtmosphereServlet</servlet-name>
<url-pattern>/websocket/*</url-pattern>
</servlet-mapping>
前端需要引入 atmosphere.js
前端可以封装一个简易的调用
html:
<input id="send" type="input">
<input type="button" onclick="send()" value="发送">
<span id="sendvalue"></span>
js:
var request={
url:'http://localhost:8082/工程名称/websocket/test',
contentType:"application/json",
transport:"websocket",
fallbackTransport:"long-polling",
onTransportFailure: function(errorMsg, request) {
request.fallbackTransport = "long-polling";
transport = "long-polling";
},
onMessage:function(response) {
var msgStr = response.responseBody;
$("#sendvalue").text(msgStr);
}
}
var subSocket=atmosphere.subscribe(request);
function send(){
var send=$('#send').val();
subSocket.push(send);
}
后端接收代码
import lombok.extern.slf4j.Slf4j;
import org.atmosphere.config.service.Disconnect;
import org.atmosphere.config.service.ManagedService;
import org.atmosphere.config.service.Message;
import org.atmosphere.config.service.Ready;
import org.atmosphere.cpr.Broadcaster;
import javax.inject.Inject;
import javax.inject.Named;
@Slf4j
@ManagedService(path = "websocket/test")
public class WebsocketTest {
@Inject
@Named("websocket/test")
private static Broadcaster broadcaster;
@Ready
public void onReady() {
log.info("onReady"); //准备
}
@Disconnect
public void onDisconnect() {
log.info("onDisconnect"); //销毁
}
@Message
public void onMessage(String message) {
log.info("onMessage");
broadcaster.broadcast(message); //发送给前端
}
}
1188

被折叠的 条评论
为什么被折叠?



