websocket实现实时直播

作为一名web开发者，我使用websocket实现实时直播（滑鸡版）。
为什么是滑鸡版呢？因为他上不了生产，只能了解一下直播的思路，不过也挺有意思的！

思路

开发思路，我们使用websocket实现数据传输，后台就用spring boot集成了websocket，当然用netty自定义更好，我这里直接拿spring全家桶快速开发。
主播视频数据实时推送到服务端，然后由websocket推送给用户观看。最后把弹幕给实现了，这里我用Chrome浏览器+笔记本，谷歌+360极速浏览器。有些浏览器调用摄像头函数可能不一致，导致无法启动。
项目源码：https://github.com/xcocean/wszb

一、创建项目

创建一个spring boot项目wszb快速开发，maven如下：

    
      org.springframework.boot
      spring-boot-starter-websocket

二、实现websocket服务端---画面传输

配置

@Configuration
public class WebSocketConfig {
  @Bean
  public ServerEndpointExporter serverEndpointExporter() {
    return new ServerEndpointExporter();
  }
}

controller

用来做页面控制

@Controller
public class WsController {
  /**
   * 用户可以看到画面
   */
  @GetMapping("")
  public String index() {
    return "index";
  }

  /**
   * 主播直播的画面
   */
  @GetMapping("video")
  public String video() {
    return "video";
  }
}

视频websocket

package com.lingkang.wszb.websocket;

import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;

@ServerEndpoint(value = "/v")
@Component
public class VideoWebsocket {

  //concurrent包的线程安全，用来存放每个客户端对应的WebSocket
  private static ConcurrentHashMap webSocket = new ConcurrentHashMap();
  //与某个客户端的连接会话，需要通过它来给客户端发送数据
  private Session session;
  // 表示主播
  private static final String video = "v";
  // 给用户一个id
  private static int id = 0;

  private static String thisUser = "";


  /**
   * 连接建立成功调用的方法
   */
  @OnOpen
  public void onOpen(Session session) {
    this.session = session;
    try {
      String type = session.getQueryString();
      if (type.equals("video")) {
        // 表示主播
        thisUser = video;
        webSocket.put(thisUser, this);
        System.out.println("有人加入，是主播");
      } else {
        // 表示用户
        thisUser = String.valueOf(id);
        webSocket.put(thisUser, this);
        System.out.println("有人加入，是用户");
        id = id + 1;
      }
    } catch (Exception e) {
      e.printStackTrace();
    }
  }

  /**
   * 连接关闭调用的方法
   */
  @OnClose
  public void onClose(Session session) throws Exception {
    System.out.println("关闭连接：" + thisUser);
    //需要清除当前和移除内存里的，不然还能接收信息
    session.close();
    webSocket.remove(thisUser);
  }

  /**
   * 收到客户端消息后调用的方法
   */
  //@OnMessage(maxMessageSize = 12)表示超出12个字节会自动关闭这个连接
  @OnMessage(maxMessageSize = 56666)
  public void onMessage(String message, Session session) throws IOException {
    System.out.println("来自客户端的消息:" + message);
    //群发消息
    Iterator iter = webSocket.entrySet().iterator();
    while (iter.hasNext()) {
      Map.Entry entry = (Map.Entry) iter.next();
      if (!entry.getKey().equals(video)) {//主播除外
        webSocket.get(entry.getKey()).session.getBasicRemote().sendText(message);
      }
    }
  }

  /**
   * 发生错误时调用
   */
  @OnError
  public void onError(Session session, Throwable error) throws Exception {
    System.out.println("发生错误：" + thisUser);
    session.close();
    webSocket.remove(thisUser);
  }
}

index.html




  
  用户观看页面


这是用户观看页面

video.html




  
  video


这是主播页面

演示：专业操作，请勿模仿

啥丢操作.gif

实现即时弹幕

弹幕我就懒得实现了，再new 一个websocket做弹幕链接，然后用js把接收的弹幕在显示地方移动过来就行了。

websocket实现实时直播(滑鸡版)