webSocket 简单实例

原创 2015年11月18日 11:50:30

什么是webSocket?

webSocket 是解决服务器端和客户端通信实时的技术。ajax也可以通信,但是他做不到实时。在webSocket之前我们想要实时效果,都是要通过轮询的方式,显然这样很浪费资源。

webSocket 的强大在于,比起ajax 需要从客户端发起请求,webSocket的 服务端与客户端可以相互实时推送消息。


如何使用webSocket?

首先你得有一个支持它的浏览器。(IE 是不支持的)

创建socket后 ,客户端可以通过 onopen,onmessage,onclose,onerror 这四个时间对socket进行响应。


举个栗子:

环境:tomcat7或以上。jdk7 或以上 

1.webSocketTest.java 

package instance;
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;
 
<span style="color:#ff6666;">@ServerEndpoint("/websocket")</span>
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");
  }
}

2.page.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/webScoket/<span style="color:#ff6666;">websocket</span>');
 
    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>

这里要注意:

 var webSocket =
      new WebSocket('ws://localhost:8080/webScoket/websocket');
其中:一个是项目名称,一个是注解的服务器名称


到此你启动服务器,运行page.html 

出现如图,就说明成功了






java websocket简单实例绝对可用

坑爹的网友,一个个的网上websocket例子都不写web.xml的配置,MD~这不是给别人挖坑吗?既然写例子就要完整啊!!! 项目环境:jdk7+tomcat7    (导入catalina.jar...
  • ma929226676
  • ma929226676
  • 2016年03月24日 12:01
  • 40242

WebSocket入门教程(五)-- WebSocket实例:简单多人聊天室

本文,我们通过nodejs和javascript实现一个网页聊天室的demo。主要包括,聊天,改用户名,查看其他用户在线状态的功能。大致流程为,用户访问网页,即进入聊天状态,成为新游客,通过底部的输入...
  • u010136741
  • u010136741
  • 2016年06月09日 18:49
  • 12147

HTML5 WebSocket DEMO示例

1.使用Eclipse+Tomcat8环境进行演示 2.创建一个Servlet用于接收客户端的请求数据,并进行处理 package com.jCuckoo.server; import java...
  • guoquanyou
  • guoquanyou
  • 2016年06月15日 16:16
  • 8247

WebSocket使用教程-带完整实例

摘要: WebSocket使用教程 - 带完整实例 什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服...
  • dj0379
  • dj0379
  • 2016年10月21日 15:11
  • 23133

Java Websocket实例【项目实战系列】

现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发 出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这...
  • LOVELONG8808
  • LOVELONG8808
  • 2016年08月15日 16:53
  • 11249

微信小程序入门六: WebSocket应用

实例内容今天主要说一下微信的WebSocket接口以及在小程序中的使用。WebSocket是什么(简述)微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做...
  • lecepin
  • lecepin
  • 2017年01月20日 21:22
  • 19793

WebSocket剖析

WebSocket剖析http协议在了解WebSocket之前,有必要简单复习一下http协议。请求和响应Http协议用于客户端与服务端的通信,客户端发出请求(request),服务端返回响应(res...
  • Ayhan_huang
  • Ayhan_huang
  • 2017年12月07日 20:24
  • 161

HTML5 WebSocket的使用及例子

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。 现在,很多网站为了实现即时通讯(real-time...
  • huangwuyi
  • huangwuyi
  • 2013年10月21日 16:13
  • 53223

【WebSocket】WebSocket经典实例

接着上一篇的环境,我们接下来弄了个WebSocketTest2目录结构 jquery-1.12.3.js(贴心服务)WebSocketTest2.javapackage com.hust.webso...
  • bug_moving
  • bug_moving
  • 2016年10月28日 17:37
  • 924

websocket简单实例

一、新建mavenweb 项目 pom中添加依赖: javax javaee-api 7.0 provided 二、服务端: imp...
  • qq_24949727
  • qq_24949727
  • 2017年03月15日 17:53
  • 1321
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webSocket 简单实例
举报原因:
原因补充:

(最多只允许输入30个字)