websocket 通信用户认证逻辑优化

Author: nonfu

app/Http/Controllers/SocketIOController.php

@@ -8,6 +8,11 @@ class SocketIOController extends Controller
 {
     protected $transports = ['polling', 'websocket'];
 
+    public function __construct()
+    {
+        $this->middleware('auth:api');
+    }
+
     public function upgrade(Request $request)
     {
         if (! in_array($request->input('transport'), $this->transports)) {

app/Http/Middleware/Authenticate.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Middleware;
 
+use Illuminate\Auth\Access\AuthorizationException;
 use Illuminate\Auth\Middleware\Authenticate as Middleware;
 
 class Authenticate extends Middleware
@@ -15,7 +16,7 @@ class Authenticate extends Middleware
     protected function redirectTo($request)
     {
         if (! $request->expectsJson()) {
-            return route('login');
+            throw new AuthorizationException("登录后才能建立 Websocket 连接");
         }
     }
 }

public/js/app.js

@@ -51310,7 +51310,6 @@ _socket__WEBPACK_IMPORTED_MODULE_5__["default"].on('disconnect', function () {
 });
 _socket__WEBPACK_IMPORTED_MODULE_5__["default"].on('message', function (obj) {
   _store__WEBPACK_IMPORTED_MODULE_4__["default"].commit('addRoomDetailInfos', [obj]);
-  console.log(Notification.permission);
 
   if (Notification.permission === "granted") {
     popNotice(obj);
@@ -53028,9 +53027,12 @@ router.afterEach(function (route) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var socket_io_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! socket.io-client */ "./node_modules/socket.io-client/lib/index.js");
 /* harmony import */ var socket_io_client__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(socket_io_client__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./store */ "./resources/js/store/index.js");
 // 通过 Socket.io 客户端发起 WebSocket 请求
 
-var socket = socket_io_client__WEBPACK_IMPORTED_MODULE_0___default()('http://webchats.test');
+
+var api_token = _store__WEBPACK_IMPORTED_MODULE_1__["default"].state.userInfo.token;
+var socket = socket_io_client__WEBPACK_IMPORTED_MODULE_0___default()('http://webchats.test?api_token=' + api_token);
 /* harmony default export */ __webpack_exports__["default"] = (socket);
 
 /***/ }),

readme.md

@@ -14,5 +14,6 @@
 - [十二、加入和退出聊天室房间功能实现](https://xueyuanjun.com/post/21337)
 - [十三、发送文本/表情消息](https://xueyuanjun.com/post/21351)
 - [十四、发送图片消息](https://xueyuanjun.com/post/21360)
-- 十五、代码优化
-- 十六、性能优化
+- [十五、用户头像上传](https://xueyuanjun.com/post/21373)
+- [十六、通过心跳连接替换轮询保持长连接](https://xueyuanjun.com/post/21412)
+- [十七、Websocket 通信用户认证逻辑优化](https://xueyuanjun.com/post/21413)

resources/js/app.js

@@ -9,7 +9,6 @@ import router from './router';   // router
 import store from './store';     // store
 import socket from './socket';
 import {queryString} from './utils/queryString';
-
 import MuseUI from 'muse-ui';    // muse-ui组件
 Vue.use(MuseUI);
 
@@ -77,7 +76,6 @@ socket.on('disconnect', () => {
 
 socket.on('message', function (obj) {
     store.commit('addRoomDetailInfos', [obj]);
-    console.log(Notification.permission);
     if (Notification.permission === "granted") {
         popNotice(obj);
     } else if (Notification.permission !== "denied") {

resources/js/socket.js

@@ -1,4 +1,6 @@
 // 通过 Socket.io 客户端发起 WebSocket 请求
 import io from 'socket.io-client';
-const socket = io('http://webchats.test');
+import store from "./store";
+let api_token = store.state.userInfo.token;
+const socket = io('http://webchats.test?api_token=' + api_token);
 export default socket;

routes/web.php

@@ -15,15 +15,5 @@
     return view('index');
 });
 
-Route::get('/test', function () {
-    return 'hello world!';
-});
-
 Route::get('/socket.io', 'SocketIOController@upgrade');
 Route::post('/socket.io', 'SocketIOController@ok');
-
-Route::get('download', function() {
-    return response()->streamDownload(function(){
-        echo file_get_contents('https://github.com/nonfu/laravel-resources/raw/master/pkgs/laravel58.zip');
-    }, 'laravel58.zip');
-});

routes/websocket.php

@@ -1,5 +1,4 @@
 <?php
-
 use App\Count;
 use App\User;
 use App\Message;
@@ -23,10 +22,12 @@
 WebsocketProxy::on('connect', function (WebSocket $websocket, Request $request) {
     // 发送欢迎信息
     $websocket->setSender($request->fd);
+    $websocket->loginUsing(auth('api')->user());
 });
 
 WebsocketProxy::on('room', function (WebSocket $websocket, $data) {
-    if (!empty($data['api_token']) && ($user = User::where('api_token', $data['api_token'])->first())) {
+    if ($userId = $websocket->getUserId()) {
+        $user = User::find($userId);
         // 从请求数据中获取房间ID
         if (empty($data['roomid'])) {
             return;
@@ -64,7 +65,8 @@
 });
 
 WebsocketProxy::on('message', function (WebSocket $websocket, $data) {
-    if (!empty($data['api_token']) && ($user = User::where('api_token', $data['api_token'])->first())) {
+    if ($userId = $websocket->getUserId()) {
+        $user = User::find($userId);
         // 获取消息内容
         $msg = $data['msg'];
         $img = $data['img'];
@@ -129,10 +131,12 @@
 
 WebsocketProxy::on('disconnect', function (WebSocket $websocket, $data) {
     roomout($websocket, $data);
+    $websocket->logout();
 });
 
 function roomout(WebSocket $websocket, $data) {
-    if (!empty($data['api_token']) && ($user = User::where('api_token', $data['api_token'])->first())) {
+    if ($userId = $websocket->getUserId()) {
+        $user = User::find($userId);
         if (empty($data['roomid'])) {
             return;
         }
@@ -154,7 +158,8 @@ function roomout(WebSocket $websocket, $data) {
 }
 
 WebsocketProxy::on('login', function (WebSocket $websocket, $data) {
-    if (!empty($data['api_token']) && ($user = User::where('api_token', $data['api_token'])->first())) {
+    if ($userId = $websocket->getUserId()) {
+        $user = User::find($userId);
         // 将用户与指定fd连接关联起来保存到Redis中
         Redis::hset('socket_id', $user->id, $websocket->getSender());
         // 获取未读消息