websocket的小记

最新推荐文章于 2024-05-25 21:57:52 发布
最新推荐文章于 2024-05-25 21:57:52 发布
阅读量2.7k 收藏 1
点赞数
文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/saizzzzzz/article/details/53336061
版权

这几天学习websocket终于把前后端都调通了,现在就记录一下.因为最后配置的apapche,印象比较深,就从apache配置开始.参考websocket;

apache支持配置

之前使用的xampp里的apache,是2.2版本的,不支持ws协议.所以昨天下午下午加今天早上把apapche配置都搞通了.先卸载了xampp,下载安装了2.4的apache 安装初步配置教程

先把 httpd.conf里的modules/mod_proxy_wstunnel.so的注释去掉
再在 <VirtualHost *:80> 里配置ProxyPass /demo ws://localhost:4040/demo
前端js var socket = new WebSocket("ws://localhost/demo/actions");
这样就可以通过apache访问了

html+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 80%;
            background-color: #1f1f1f;
        }

        #wrapper {
            width: 960px;
            margin: auto;
            text-align: left;
            color: #d9d9d9;
        }

        p {
            text-align: left;
        }

        .button {
            display: inline;
            color: #fff;
            background-color: #f2791d;
            padding: 8px;
            margin: auto;
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            box-shadow: none;
            border: none;
        }

        .button:hover {
            background-color: #ffb15e;
        }
        .button a, a:visited, a:hover, a:active {
            color: #fff;
            text-decoration: none;
        }

        #addDevice {
            text-align: center;
            width: 960px;
            margin: auto;
            margin-bottom: 10px;
        }

        #addDeviceForm {
            text-align: left;
            width: 400px;
            margin: auto;
            padding: 10px;
        }

        #addDeviceForm span {
            display: block;
        }

        #content {
            margin: auto;
            width: 960px;
        }

        .device {
            width: 180px;
            height: 110px;
            margin: 10px;
            padding: 16px;
            color: #fff;
            vertical-align: top;
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            display: inline-block;
        }

        .device.off {
            background-color: #c8cccf;
        }

        .device span {
            display: block;
        }

        .deviceName {
            text-align: center;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .removeDevice {
            margin-top: 12px;
            text-align: center;
        }

        .device.Appliance {
            background-color: #5eb85e;
        }

        .device.Appliance a:hover {
            color: #a1ed82;
        }

        .device.Electronics {
            background-color: #0f90d1;
        }

        .device.Electronics a:hover {
            color: #4badd1;
        }

        .device.Lights {
            background-color: #c2a00c;
        }

        .device.Lights a:hover {
            color: #fad232;
        }

        .device.Other {
            background-color: #db524d;
        }

        .device.Other a:hover {
            color: #ff907d;
        }

        .device a {
            text-decoration: none;
        }

        .device a:visited, a:active, a:hover {
            color: #fff;
        }

        .device a:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>


<div id="wrapper">
    <h1>Java Websocket Home</h1>
    <p>Welcome to the Java WebSocket Home. Click the Add a device button to start adding devices.</p>
    <br />
    <div id="addDevice">
        <div class="button"> <a href="#" OnClick="showForm()">Add a device</a> </div>
        <form id="addDeviceForm">
            <h3>Add a new device</h3>
            <span>Name: <input type="text" name="device_name" id="device_name"></span>
            <span>Type:
                        <select id="device_type">
                            <option name="type" value="Appliance">Appliance</option>
                            <option name="type" value="Electronics">Electronics</option>
                            <option name="type" value="Lights">Lights</option>
                            <option name="type" value="Other">Other</option>
                        </select></span>

            <span>Description:<br />
                        <textarea name="description" id="device_description" rows="2" cols="50"></textarea>
                    </span>

            <input type="button" class="button" value="Add" onclick=formSubmit()>
            <input type="reset" class="button" value="Cancel" onclick=hideForm()>
        </form>
    </div>
    <br />
    <h3>Currently connected devices:</h3>
    <div id="content">
    </div>
</div>
<script>
    window.onload = init;
    var socket = new WebSocket("ws://"+window.location.host+"/demo/actions");
    socket.onmessage = onMessage;

    function onMessage(e) {
        var device = JSON.parse(e.data);
        if(device.action === "add")
        {
            printDeviceElement(device);
        }
        if(device.action === "remove")
        {
            document.getElementById(device.id).remove();
            device.parentNode.removeChild(device);
        }
        if(device.action === "toggle")
        {
            var node = document.getElementById(device.id);
            var statusText = node.children[2];
            if(device.status ==="On")
            {
                statusText.innerHTML = "Status: "+device.status+" (<a href\"#\" OnClick=toggleDevice("+device.id+")>Turn off</a>)";
            }
            else if(device.status === "Off")
            {
                statusText.innerHTML = "Status: "+device.status + " (<a href=\"#\" OnClick=toggleDevice("+device.id+")>Turn on</a>)";
                deviceDiv.setAttribute("class", "device off");
            }

        }
    }

    function addDevice(name,type,description) {
        var DeviceAction = {action:"add",name:name,type:type,description:description};
        socket.send(JSON.stringify(DeviceAction));
    }

    function removeDevice(ele)
    {
        var id = ele;
        var DeviceAction = {action:"remove",id:id};
        socket.send(JSON.stringify(DeviceAction));
    }

    function toggleDevice(ele) {
        var id = ele;
        var DeviceAction = {action:"toggle",id:id};
        socket.send(JSON.stringify(DeviceAction));
    }

    function printDeviceElement(device) {
        var content = document.getElementById("content");

        var deviceDiv = document.createElement("div");
        deviceDiv.setAttribute("id", device.id);
        deviceDiv.setAttribute("class","device "+device.type);
        content.appendChild(deviceDiv);

        var deviceName = document.createElement("span");
        deviceName.setAttribute("class","deviceName");
        deviceName.innerHTML = device.name;
        deviceDiv.appendChild(deviceName);

        var deviceType = document.createElement("span");
        deviceType.innerHTML = "<b>Type:</b> "+device.type;
        deviceDiv.appendChild(deviceType);

        var deviceStatus = document.createElement("span");
        if(device.status==="On")
        {
            deviceStatus.innerHTML = "<b>Status:</b>: "+device.status +" (<a href=\"#\" OnClick=toggleDevice("+device.id+")>Turn off</a>)";
        }
        else
        {
            deviceStatus.innerHTML = "<b>Status:</b> "+device.status+" (<a href=\"#\" OnClick=toggleDevice("+device.id+")>Turn on</a>";
        }
        deviceDiv.appendChild(deviceStatus);

        var deviceDescription = document.createElement("span");
        deviceDescription.innerHTML = "<b>Comments:</b> "+ device.description;
        deviceDiv.appendChild(deviceDescription);

        var removeDevice =document.createElement("span");
        removeDevice.setAttribute("class","removeDeivce");
        removeDevice.innerHTML = "<a href\"#\" OnClick=removeDevice("+device.id+")>Reomve device</a>";
        deviceDiv.appendChild(removeDevice);
    }

    function showForm() {
        document.getElementById("addDeviceForm").style.display = "";
    }
    function hideForm() {
        document.getElementById("addDeviceForm").style.display = "none";
    }

    function formSubmit() {
        var form = document.getElementById("addDeviceForm")
        var name = form.elements["device_name"].value;
        var type = form.elements["device_type"].value;
        var description = form.elements["device_description"].value;
        hideForm();
        document.getElementById("addDeviceForm").reset();
        addDevice(name,type,description);
    }

    function init() {
        hideForm();
    }

</script>
</body>
</html>

Java

com.xxx.model.Device

package com.xxx.model;

public class Device
{

    private int id;
    private String name;
    private String status;
    private String type;
    private String description;

    public Device()
    {
    }

    public int getId()
    {
        return id;
    }

    public void setId(int id)
    {
        this.id = id;
    }

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public String getStatus()
    {
        return status;
    }

    public void setStatus(String status)
    {
        this.status = status;
    }

    public String getType()
    {
        return type;
    }

    public void setType(String type)
    {
        this.type = type;
    }

    public String getDescription()
    {
        return description;
    }

    public void setDescription(String description)
    {
        this.description = description;
    }
}

com.xxx.websocket.DeviceSessionHandler

package com.xxx.websocket;

import com.xxx.model.Device;
import org.springframework.stereotype.Component;

import javax.enterprise.context.ApplicationScoped;
import javax.json.JsonObject;
import javax.json.spi.JsonProvider;
import javax.websocket.Session;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import java.util.logging.Level;
import java.util.logging.Logger;


@ApplicationScoped
public class DeviceSessionHandler
{
    private int deviceId = 0;
    private final Set<Session> sessions = new HashSet<Session>();
    private final Set<Device> devices = new HashSet<Device>();

    public void addSession(Session session)
    {
        sessions.add(session);
        for(Device device:devices)
        {
            JsonObject addMessage = createAddMessage(device);
            sendToSession(session,addMessage);
        }
    }

    public void removeSession(Session session)
    {
        sessions.remove(session);
    }

    public List<Device> getDevices()
    {
        return new ArrayList(devices);
    }

    public  void addDevice(Device device)
    {
        device.setId(deviceId);
        devices.add(device);
        deviceId++;
        JsonObject addMessage = createAddMessage(device);
        sendToAllConnectedSessions(addMessage);


    }

    public void removeDevice(int id)
    {
        Device device = getDeviceById(id);
        if(device != null)
        {
            devices.remove(device);
            JsonProvider provider = JsonProvider.provider();
            JsonObject removeMessage = provider.createObjectBuilder()
                    .add("action","remove")
                    .add("id",id)
                    .build();
            sendToAllConnectedSessions(removeMessage);


        }
    }

    public void toggleDevice(int id)
    {
        JsonProvider provider =JsonProvider.provider().provider();
        Device device = getDeviceById(id);
        if(device!=null)
        {
            if("On".equals(device.getStatus()))
                device.setStatus("Off");
            else
                device.setStatus("On");
            JsonObject updateMessage = provider.createObjectBuilder()
                    .add("action","toggle")
                    .add("id",device.getId())
                    .add("status",device.getStatus())
                    .build();
            sendToAllConnectedSessions(updateMessage);

        }
    }

    private Device getDeviceById(int id)
    {
        for(Device device:devices)
        {
            if(device.getId()==id)
                return device;
        }
        return null;
    }

    private JsonObject createAddMessage(Device device)
    {
        JsonProvider provider = JsonProvider.provider();
        JsonObject addMessage = provider.createObjectBuilder()
                .add("action","add")
                .add("id",device.getId())
                .add("name",device.getName())
                .add("type",device.getType())
                .add("status",device.getStatus())
                .add("description",device.getDescription())
                .build();
        return addMessage;
    }

    private void sendToAllConnectedSessions(JsonObject message)
    {
        for(Session session :sessions)
        {
            sendToSession(session,message);
        }
    }

    private void sendToSession(Session session,JsonObject message)
    {
        try
        {
            session.getBasicRemote().sendText(message.toString());
        } catch (IOException e)
        {
            sessions.remove(session);
            Logger.getLogger(DeviceSessionHandler.class.getName()).log(Level.SEVERE,null,e);
        }
    }




}

com.xxx.websocket.DeviceWebSocketServer

package com.xxx.websocket;

import com.xxx.model.Device;

import javax.enterprise.context.ApplicationScoped;
import javax.inject.Inject;
import javax.json.Json;
import javax.json.JsonObject;
import javax.json.JsonReader;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.StringReader;
import java.util.logging.Level;
import java.util.logging.Logger;

@ApplicationScoped
@ServerEndpoint("/actions")
public class DeviceWebSocketServer
{

    @Inject
    private DeviceSessionHandler sessionHandler;

    @OnOpen
    public void open(Session session)
    {
        sessionHandler.addSession(session);
    }

    @OnClose
    public void close(Session session)
    {
        sessionHandler.removeSession(session);
    }

    @OnError
    public void onError(Throwable error)
    {
        Logger.getLogger(DeviceWebSocketServer.class.getName()).log(Level.SEVERE,null,error);
    }

    @OnMessage
    public void handleMessage(String message,Session session)
    {
        try(JsonReader reader = Json.createReader(new StringReader(message)))
        {
            JsonObject jsonMessage = reader.readObject();
            if("add".equals(jsonMessage.getString("action")))
            {
                Device device = new Device();
                device.setName(jsonMessage.getString("name"));
                device.setDescription(jsonMessage.getString("description"));
                device.setType(jsonMessage.getString("type"));
                device.setStatus("Off");
                sessionHandler.addDevice(device);
            }
            if("remove".equals(jsonMessage.getString("action")))
            {
                int id = jsonMessage.getInt("id");
                sessionHandler.removeDevice(id);
            }

            if("toggle".equals(jsonMessage.getString("action")))
            {
                int id = jsonMessage.getInt("id");
                sessionHandler.toggleDevice(id);
            }
        }
    }

}

GlassFish

其实我想用tomcat来运行的,但是非常尴尬不知道怎么运行,按照oracle上的例子就只能用glassfish了.
tomcat是一个servlet容器,glassfish是一个javaee容器.所以glassfish也支持servlet,听说比较早的glassfish版本的sevrlet实现就是使用的tomcat.

安装 glassfish

先去下载 https://glassfish.java.net/download.html
这里写图片描述
下载下来
这里写图片描述
解压
在windows下点击这里写图片描述
在控制台输入 start-domain就可以启动了

intellij引入glassfish

在菜单栏里 run -> Edit Configurations
这里写图片描述
如果没找到xx items more(irrelevant)里找

第一次使用,需要配置glassfish所在的目录
这里写图片描述
Server Domain 选 domain1

然后在 Deployment选择发布的war包
这里写图片描述

这里说一句,Open browser里的地址是默认的使用8080端口,如果想改,访问glassfish的控制台,一般默认是localhost:4848 ,在这里稍等一会儿,它就会跳转到配置页面

这里写图片描述
修改端口后保存,应用就可以通过新端口来访问了

后记

这些都配好之后这里写图片描述点击就可以运行了
运行成功了,可以做一些小操作
这里写图片描述

saioAc
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebSocket详解-01
雷雨天的雷胖子
06-28 2090
目录 一、概述 二、详解 一、概述 WebSocket的定义 WebSocket是Html5提供的一种在单个TCP连接上进行双向通信的协议，解决了客户端和服务端之间的实时通信问题。浏览器和服务器只需要完成一次握手，二者之间就可以创建一个持久性的TCP连接，从而实现双向实时通信。 WebSocket的优点 很多网站利用AJAX轮询实现数据推送，轮询是在特定时间间隔，由浏览器主动发起请求，将服务器的数据拉回来。轮询需要不断向服务器发送请求，会占用很多带宽和服...
websocket 简单理解
sn5diphone6的博客
08-09 291
websocket
使用Java实现WebSocket
最新发布
CH_happy的博客
05-25 377
点击前端发送消息按钮时的处理//点击发送消息按钮的处理函数WebSocketServer类中的onMessage方法用于实现接受到客户端的信息时的处理/*** 收到客户端消息后调用的方法* @param message 客户端发送过来的消息*/@OnMessage// 当收到客户端的信息时服务端主动推送给客户端信息表示收到sendToAllClient("服务端收到来自客户端：" + sid + "的信息:" + message);前端接收到服务器消息的处理。
Websocket原理
weixin_33856370的博客
05-07 125
一、websocket与httpWebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也...
WebSocket前端封装，使用详细？(websocket相关属性和请求体传参)
weixin_65793170的博客
12-11 4268
websocket事件（仅供参考）： let socket= null； //socket/ws socket = new WebSocket("//请求地址")；//定义socket socket.onopen 连接建立时触发 socket.onmessage客户端接受服务端数据时触发 socket.onerror 通信错误时触发
js 封装websocket (包括心跳检测，断线重连等)
weixin_43827751的博客
08-05 3074
代码】js 封装websocket (包括心跳检测，断线重连等)
websocket c语言实现
10-07
WebSocket是一种在客户端和服务器之间建立持久连接的协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输，极大地提高了实时性。在Web开发中，WebSocket为需要实时交互的应用提供了强大的支持，比如...
若依WebSocket集成
04-01
WebSocket是一种在客户端和服务器之间建立长连接的协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输，极大地提高了实时性。在若依框架中集成WebSocket，可以为用户带来更流畅、即时的交互体验，尤其...
.net websocket
10-14
在.NET框架中，WebSocket提供了一种简单的方式来构建高性能的实时应用，比如聊天室、在线游戏或者实时数据图表等。本文将深入探讨.NET环境下，特别是在WinForms应用程序中使用WebSocket的相关知识点。 首先，.NET ...
websocket总结
07-25
WebSocket 总结 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。通过 TCP 来传输数据在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输...
WebSocket Demo
08-07
WebSocket是Web应用中的一种实时通信协议，它允许客户端与服务器之间建立持久的连接，从而实现双向通信。在传统的HTTP协议中，每次请求-响应交互都需要重新建立连接，而WebSocket则提供了一种更高效的方式，降低了...
WebSocket(保姆级教学)
weixin_70563938的博客
10-31 4824
快速了解WebSocket，对WebSocket的介绍堪称保姆级，初学者上手即可使用
WebSocket 详解教程
qq_36711388的博客
04-11 781
WebSocket是一种网络通信协议，很多高级功能都需要它。 RFC6455定义了它的通信标准。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 为什么需要 WebSocket？ 了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起...
apache 配置 wss websocket打开握手超时_Websocket （一）基础认知
weixin_30095343的博客
12-26 1155
一、WebSocket 简介 WebSocket 是一种基于 TCP 的网络协议。在 2009 年诞生，于 2011 年被 IETF 定为标准 RFC 6455 通信标准，并由 RFC7936 补充规范。WebSocket API 也被 W3C 定为标准。WebSocket 也是一种全双工通信的协议，既允许客户端向服务器主动发送消息，也允许服务器主动向客户端发送消息。在 WebSocket 中，浏...
Apache配置WebSocket代理
yangkunlin的专栏
09-25 1万+
引入mod_proxy_wstunnel.so模块，使其可以解析ws、wss协议 LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so 配置代理路径跳转 Include conf/vhosts.conf &lt;VirtualHost *:80&gt;     ServerName yangkl-test.com     S...
在Apache上搭建pywebsocket提供html5的websocket服务
热门推荐
皓月如我的专栏
03-22 1万+
参考：http://www.travisglines.com/web-coding/how-to-set-up-apache-to-serve-html5-websocket-applications-with-pywebsocket 环境：SuSE Linux Entiprise Server 11 SP1 + Apache2.2.19 + Python2.6 关于Apache的安装
WebSocket介绍，与Socket的区别
hsany330的专栏
09-13 320
WebSocket介绍与原理 WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 ——百度百科 目的：即时通讯，替代轮询 网站上的即时通讯是很常见的，比如网页的QQ，聊天系统等。按照以往的技术能力通常是采用轮询技术解决。 HTTP协议是非持久化的，单
　websocket
09-12
WebSocket是HTML5下一种新的协议，它实现了浏览器与服务器全双工通信，能更好地节省服务器资源和带宽，并达到实时通讯的目的。WebSocket是一个持久化的协议，通过握手机制，客户端和服务器之间可以建立一个类似于TCP的连接，从而方便它们之间的通信。在WebSocket出现之前，web交互一般是基于HTTP协议的短连接或者长连接。WebSocket是一种全新的协议，不属于HTTP无状态协议，协议名为"ws"。 WebSocket与HTTP的关系是，WebSocket在建立握手时，数据是通过HTTP传输的。但是，在真正传输数据时，WebSocket不需要HTTP协议。不同点是，WebSocket是双向通信协议，可以双向发送或接受信息，模拟了Socket协议；而HTTP是单向的，浏览器发起向服务器的连接，服务器预先并不知道这个连接。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值