如何按照 redux 中的 promise 转换此 websocket?我想使用这个库 https://www.npmjs.com/package/websocket-as-promised ,但我不知道如何在我的 weksocket 中实现它。
我需要你的帮助。
这个用于 redux 的 websocket 是由 "exec64" 创建的,它在我的应用程序中起作用,但我希望它返回一个 promise 。
来源: https://exec64.co.uk/blog/websockets_with_redux/
我的中间件
import actions from './actions'
const socketMiddleware = (function(){
var socket = null;
const onOpen = (ws,store,token) => evt => {
//Send a handshake, or authenticate with remote end
//Tell the store we're connected
store.dispatch(actions.connected());
}
const onClose = (ws,store) => evt => {
//Tell the store we've disconnected
store.dispatch(actions.disconnected());
}
const onMessage = (ws,store) => evt => {
//Parse the JSON message received on the websocket
var msg = JSON.parse(evt.data);
switch(msg.type) {
case "CHAT_MESSAGE":
//Dispatch an action that adds the received message to our state
store.dispatch(actions.messageReceived(msg));
break;
default:
console.log("Received unknown message type: '" + msg.type + "'");
break;
}
}
return store => next => action => {
switch(action.type) {
//The user wants us to connect
case 'CONNECT':
//Start a new connection to the server
if(socket != null) {
socket.close();
}
//Send an action that shows a "connecting..." status for now
store.dispatch(actions.connecting());
//Attempt to connect (we could send a 'failed' action on error)
socket = new WebSocket(action.url);
socket.onmessage = onMessage(socket,store);
socket.onclose = onClose(socket,store);
socket.onopen = onOpen(socket,store,action.token);
break;
//The user wants us to disconnect
case 'DISCONNECT':
if(socket != null) {
socket.close();
}
socket = null;
//Set our state to disconnected
store.dispatch(actions.disconnected());
break;
//Send the 'SEND_MESSAGE' action down the websocket to the server
case 'SEND_CHAT_MESSAGE':
socket.send(JSON.stringify(action));
break;
//This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);
}
}
})();
export default socketMiddleware
我的操作类型
export const WS_CONNECTING = 'WS_CONNECTING'
export const WS_CONNECTED = 'WS_CONNECTED'
export const WS_DISCONNECTED = 'WS_DISCONNECTED'
export const WS_CONNECT = 'WS_CONNECT'
export const WS_DISCONNECT = 'WS_DISCONNECT
我的应用 Actions( Action 创建器)
import * as types from './actionsTypes'
export function wsConnecting() {
return {
type: types.WS_CONNECTING
}
}
export function wsConnected() {
return {
type: types.WS_CONNECTED
}
}
export function wsDisconnected(reason = "No reason") {
return {
type: types.WS_DISCONNECTED,
reason
}
}
export function wsConnect(url) {
return {
type: types.WS_CONNECT,
url: url
}
}
还有我的reducer
import * as types from '../actions/actionsTypes'
function appReducers(state = [], action) {
switch (action.type) {
case types.WS_CONNECTING:
return Object.assign({}, state, { status: types.WS_CONNECTING });
case types.WS_CONNECTED:
return Object.assign({}, state, { status: types.WS_CONNECTED });
case types.WS_DISCONNECTED:
return Object.assign({}, state, { status: types.WS_DISCONNECTED });
default:
return state
}
}
export default appReducers
我尝试安装并导入库 websocket-as-promised ( https://www.npmjs.com/package/websocket-as-promised ),然后我只替换了我的 websocket 中的这段代码:
socket = new WebSocket(action.url);
**通过这个但它没有功能**
socket = new WebSocketAsPromised(action.url);
最佳答案
谢谢,我找到了我想要的解决方案。 我为那些想要 redux promise 的 websocket 的人分享我的自定义 websocket:
import actions from './actions'
import WebSocketAsPromised from 'websocket-as-promised';
const socketMiddleware = (function() {
var socket = null;
const onOpen = (ws, store, token) => {
//Send a handshake, or authenticate with remote end
//Tell the store we're connected
store.dispatch(actions.connected());
}
const onClose = (ws, store) => {
//Tell the store we've disconnected
store.dispatch(actions.disconnected());
}
const onMessage = (msg, store) => {
//Parse the JSON message received on the websocket
var msg = msg;
switch (msg.type) {
case "CHAT_MESSAGE":
//Dispatch an action that adds the received message to our state
store.dispatch(actions.messageReceived(msg));
break;
default:
console.log("Received unknown message type: '" + msg.type + "'");
break;
}
}
return store => next => action => {
switch (action.type) {
//The user wants us to connect
case 'CONNECT':
//Start a new connection to the server
if (socket != null) {
socket.close();
}
//Send an action that shows a "connecting..." status for now
store.dispatch(actions.connecting());
//Attempt to connect (we could send a 'failed' action on error)
socket = new WebSocketAsPromised(action.url);
socket.onMessage.addListener((data, jsonData) => onMessage(jsonData, store))
socket.onClose.addListener(() => onClose(socket, store))
socket.open()
.then(() => {onOpen(socket, store, action.token)})
break;
//The user wants us to disconnect
case 'DISCONNECT':
if (socket != null) {
socket.close();
}
socket = null;
//Set our state to disconnected
store.dispatch(actions.disconnected());
break;
//Send the 'SEND_MESSAGE' action down the websocket to the server
case 'SEND_CHAT_MESSAGE':
socket.send(JSON.stringify(action));
break;
//This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);
}
}
})();
export default socketMiddleware
关于javascript - 为 redux promise 的 Websocket,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46462472/