对于前端的人来说，想要入门Web前端技术，首先要了解的当然是Web前端有哪些知识点是必须掌握的。从前端产生到现在，已经从简陋的HTML，CSS，JavaScript三把刷子做出来静态网页的时代，发展到现在视觉效果酷炫，适用终端广泛，开发手段丰富多样的更广阔的发展时代。HTML、CSS，JavaScript是学习前端的基础，特别是JavaScript，我们对前端基础的掌握程度，极大程度上体现在对JavaScript的掌握程度上。所有的浏览器引擎运行的脚本语言都是JavaScript，我们使用的框架也是用JavaScript开发的。此外，我们还需要学习运行的机制和原理。不仅是框架的原理，也还包括JavaScript语言和浏览器引擎的原理。高级前端工程师对于框架和语言的理解绝不会停留于了解API的层面上，需要深入到了解内部原理和运行机制的层面上。

websocket 是 Html5 新增加特性之一，目的是浏览器与服务端建立全双工的通信方式。

Handler处理类

一：实现 WebSocketHandler 接口

1234567public interface WebSocketHandler { void afterConnectionEstablished(WebSocketSession session) throws Exception; void handleMessage(WebSocketSession session, WebSocketMessage message) throws Exception; void handleTransportError(WebSocketSession session, Throwable exception) throws Exception; void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception; boolean supportsPartialMessages();}

二：扩展 AbstractWebSocketHandler

12345678910@Servicepublic class ChatHandler extends AbstractWebSocketHandler { private static final Logger logger = LoggerFactory.getLogger(ChatHandler.class); private final static Listsessions = Collections.synchronizedList(new ArrayList()); // handle text msg. @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { session.sendMessage(new TextMessage("hello world.")); }}还可以重载其他三个方法：123handleBinaryMessage()handlePongMessage()handleTextMessage()

三：扩展 TextWebSocketHandler

还可以重载afterConnectionEstablished() and afterConnectionClosed()方法:123456789101112// 当新连接建立的时候，被调用;public void afterConnectionEstablished(WebSocketSession session) throws Exception { *("Connection established"); *("getId:" + session.getId()); * ("getLocalAddress:" + session.getLocalAddress().toString()); * ("getUri:" + session.getUri().toString());}// 当连接关闭时被调用;@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { *("Connection closed. Status: " + status);}

四： 拦截器实现

12345678910111213141516package com.websocket;@Service//如果采用WebSocketConfig类配置，需加上这一行;采用XML配置则不用public class WebSocketHandshakeInterceptor implements HandshakeInterceptor {@Overridepublic boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Mapattributes) throws Exception {if (request instanceof ServletServerHttpRequest) {attributes.put("username",userName);}return true;}@Overridepublic void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {}}

五： springMVC配置

方法一：编写 WebSocketConfig 配置类，实现 WebSocketConfigurer 接口。123456789101112@Configuration@EnableWebSocketpublic class WebSocketConfig implements WebSocketConfigurer{ @Autowired private ChatHandler chatHandler; @Autowired private WebSocketHandshakeInterceptor webSocketHandshakeInterceptor; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(chatHandler,"/chat").addInterceptors(webSocketHandshakeInterceptor); }}

六：通过 XML 配置文件添加配置

12345678910111213141516

七：controller实现

123456789101112131415161718192021222324import org.springframework.messaging.handler.annotation.MessageMapping;import org.springframework.stereotype.Controller;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.messaging.simp.SimpMessagingTemplate;import org.springframework.messaging.handler.annotation.DestinationVariable; import com.app.deploying.model.Message;import com.spring.pojo.Greeting;import com.spring.pojo.HelloMessage;@Controllerpublic class GreetingController { @Autowired private SimpMessagingTemplate simpMessagingTemplate; @MessageMapping("/room-message/{roomId}") public void roomMessage(Message message, @DestinationVariable String roomId){ String englishName = message.getTo(); String dest = "/message/" + roomId + "/" + englishName; LogConstant.*(roomId+"号房间——"+"收到"+message.getFrom()+"发送至"+englishName+"的消息："+"\""+message.getContent()+"\""); message.setDate(new Timestamp(System.currentTimeMillis())); this.*nvertAndSend(dest, message); }}

前端代码暂无