【WebSocket】手把手教会使用WebSocket-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

【WebSocket】手把手教会使用WebSocket

简介: 由于参加了黑客马拉松,团队需要这个技术,所以我下午就简单的实现了一下。找了好多demo,最大问题就是环境大家都没介绍清楚,我弄了很久很久的环境。 首先eclipse得是j2ee的,eclipse官网或者私信给我我发给你吧(如果你确实不会下) 另外一个就是tomcat,这个必须是7以上的版本在支持j2ee的websocket包。apache-tomcat-7.0.72-wi

由于参加了黑客马拉松,团队需要这个技术,所以我下午就简单的实现了一下。找了好多demo,最大问题就是环境大家都没介绍清楚,我弄了很久很久的环境。

首先eclipse得是j2ee的,eclipse官网或者私信给我我发给你吧(如果你确实不会下)

另外一个就是tomcat,这个必须是7以上的版本在支持j2ee的websocket包。apache-tomcat-7.0.72-windows-x64.zip

再就是eclipse配jdk,一定要1.7以上,不会配也可以私信我。

这个都弄完之后环境就搭好了,在eclipse建一个server。

目录结构
这里写图片描述

WebSocketTest.java

package com.hust.websockettest;

import java.io.IOException;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")
public class WebSocketTest {

    @OnMessage
    public void onMessage(String message, Session session) throws IOException, InterruptedException {

        // Print the client message for testing purposes
        System.out.println("Received: " + message);

        // Send the first message to the client
        session.getBasicRemote().sendText("This is the first server message");

        // Send 3 messages to the client every 5 seconds
        int sentMessages = 0;
        while (sentMessages < 3) {
            Thread.sleep(5000);
            session.getBasicRemote().sendText("This is an intermediate server message. Count: " + sentMessages);
            sentMessages++;
        }

        // Send a final message to the client
        session.getBasicRemote().sendText("This is the last server message");
    }

    @OnOpen
    public void onOpen() {
        System.out.println("Client connected");
    }

    @OnClose
    public void onClose() {
        System.out.println("Connection closed");
    }
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Testing websockets</title>
</head>
<body>
    <div>
        <input type="submit" value="Start" onclick="start()" />
    </div>
    <div id="messages"></div>
    <script type="text/javascript">
        var webSocket = new WebSocket(
                'ws://localhost:8080/WebSocketTest/websocket');

        webSocket.onerror = function(event) {
            onError(event)
        };

        webSocket.onopen = function(event) {
            onOpen(event)
        };

        webSocket.onmessage = function(event) {
            onMessage(event)
        };

        function onMessage(event) {
            document.getElementById('messages').innerHTML += '<br />'
                    + event.data;
        }

        function onOpen(event) {
            document.getElementById('messages').innerHTML = 'Connection established';
        }

        function onError(event) {
            alert(event.data);
        }

        function start() {
            webSocket.send('hello');
            return false;
        }
    </script>
</body>
</html>

运行截图

这里写图片描述

这里写图片描述

WebSockets 握手
客户端和服务器端TCP连接建立在HTTP协议握手发生之后。通过HTTP流量调试,很容易观察到握手。客户端一创建一个 WebSocket实例,就会出现如下请求和服务器端响应:
注意: 我们只录入了WebSocket握手所用到的HTTP头。
请求:
GET /WebSocketTest/websocket HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: wVlUJ/tu9g6EBZEh51iDvQ==
响应:
HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: websocket
Sec-WebSocket-Accept: 2TNh+0h5gTX019lci6mnvS66PSY=
注意:进行连接需要将通过Upgrade and Upgrade将协议升级到支持websocket HTTP头的Websocket协议。服务器响应表明请求被接受,协议将转换到WebSocket协议(HTTP状态码101):
HTTP/1.1 101 Web Socket Protocol Handshake

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: